Overview

Bunifu Bar chart is a component that displays data values represented as vertical bars (also called columns) on a canvas layout. It supports rendering of multiple data series that can be arranged in a stacked or side by side arrangement. It is also provides developers the ability to plot negative values that render vertical bars which descend below the x-axis plane. It is used to show data trends, and comparisons of multiple data sets

Here’s a visual of a Bunifu Bar Chart

Getting Started

This section explains you the steps required to start creating a simple bar chart and demonstrate the basic usage of the chart control.

Step 1: Drag the canvas control to the form from the toolbox

Step 2: From the toolbox drag and drop the Bunifu bar component to the form

Step 3: Add data to the Bar component as in quick tips or code below

Step 4: On the target property of the Bar component select bunifuCanvas1 as the target component

Step 5: Run the application

Code

  void renderBarchart()
        {
            Bunifu.Charts.WinForms.ChartTypes.BunifuBarChart bunifuBarChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuBarChart();
            /*
             * For this example we will use random numbers
             */
            var r = new Random();
​
            /*
             * Add your data from your source - accepts double list
             * Below is an example from a random number
             */
            List<double> data = new List<double>();
​
            for (int i = 0; i < 5; i++)
            {
                data.Add(r.Next(0,50));
            }
            /*
             * Set your data             
             */
            bunifuBarChart.Data = data;
​
            /*
             * Specify the target canvas
             */
            bunifuBarChart.TargetCanvas = bunifuChartCanvas1;
​
            /*
             * Add labels to your canvas
             * Label count should correspond to data count for charts like Bar charts
             */
            bunifuChartCanvas1.Labels = new string[] { "Label1", "Label2", "Label3", "Label4", "Label5" };
​
            /*
             * Beautify the chart by sepcifying the colors
             * Color count should correspond to data count
             */
            List<Color> bgColors = new List<Color>();
            for (int i = 0; i < data.Count; i++)
            {
                bgColors.Add(Color.FromArgb(r.Next(256), r.Next(256), r.Next(256)));
            }
            bunifuBarChart.BackgroundColor = bgColors;
        }

Private Sub renderBarchart()
    Dim bunifuBarChart As Bunifu.Charts.WinForms.ChartTypes.BunifuBarChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuBarChart()
    ' 
    '  For this example we will use random numbers
    ' 
    Dim r = New Random()
​
    ' 
    '  Add your data from your source - accepts double list
    '  Below is an example from a random number
    ' 
    Dim data As List(Of Double) = New List(Of Double)()
​
    For i As Integer = 0 To 5 - 1
        data.Add(r.[Next](0, 50))
    Next
​
    ' 
    '  Set your data             
    ' 
    bunifuBarChart.Data = data
​
    ' 
    '  Specify the target canvas
    ' 
    bunifuBarChart.TargetCanvas = bunifuChartCanvas1
​
    ' 
    '  Add labels to your canvas
    '  Label count should correspond to data count for charts like Bar charts
    ' 
    bunifuChartCanvas1.Labels = New String() {"Label1", "Label2", "Label3", "Label4", "Label5"}
​
    ' 
    '  Beautify the chart by sepcifying the colors
    '  Color count should correspond to data count
    ' 
    Dim bgColors As List(Of Color) = New List(Of Color)()
​
    For i As Integer = 0 To data.Count - 1
        bgColors.Add(Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256)))
    Next
​
    bunifuBarChart.BackgroundColor = bgColors
End Sub
​

Styling the bars’ appearance

BackgroundColor

Gets and sets a color value property to the bar’s background

BorderColor

Gets and sets a color value property to the bar’s borders

BorderSkipped

Gets and sets side of border to hide when drawing the bar strokes of the bar. Values include: bottom, left, top, right, and false. The false value means that the borders will be displayed on all sides of the bar

BorderWidth

Gets and sets an integer value that can modify the width of the bar’s border.

Working with Data

TargetCanvas

Gets and sets the canvas that will render the bar components

Data

Gets and sets an array of numbers as the datasets for the bar charts

Label

Gets and sets the text to draw on the chart’s legend

Interacting with Bunifu Bar

HoverBackgroundColor

Gets and sets a color value property to apply on the bar’s background in the event of a mouse hover on the bar.

HoverBorderColor

Gets and sets a color value property to apply on the bar’s border in the event of a mouse hover on a single bar.

HoverBorderWidth

Gets and sets an integer value that can modify the width of the bar’s border when the mouse hovers on a single bar