Bunifu Bar Chart

Overview

BunifuBarChart is a chart component that displays data values represented as vertical bars (also called columns) on a canvas layout. It is fine-tuned to render multiple data series that can be arranged in a stacked or side-by-side arrangement.

It 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 example of an application that uses the BunifuBarChartcomponent to render data.

Getting Started

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

Step 1: Drag the canvas control to the form from the toolbox and place it in a good position on the form.

Step 2: In the property window of the canvas on the labels property, add the following values in the string collection editor window as shown below:

Step 3: From the toolbox drag and drop the BunifuBarChart component to the form.

Step 4: Go to the property named TargetCanvas and select bunifuChartCanvas1 as the target component.

Step 5: Now, on the bunifuBarChart1 component properties, click the ellipsis button on the Data property, and add the following values to the collection window editor displayed as shown below:

Step 5: Run the application

Here's the result when running the application

Alternatively, we can code and render a bar chart without using the design view. Here's how to do it:

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 At Design Time

BackgroundColor

This is a property that gets and sets a color value/values to the bar’s background. We can specify the colors using the ARGB which stores the Alpha transparency as well as the red, green, and blue color values, or using the named color values provided by the .NET framework library.

Here's a sample illustration where we have specified the ARGB color value 180,30,144,255 in the color collection editor to render the bar's background color with a transparency view.

We can also provide an array of different background colors for each bar by adding more color values to the color collection editor. The first color value will be applied to the first bar rendered on the canvas. Other subsequent colors provided in the color editor will be applied to the rest of the bars rendered.

For example, let's provide each bar with its own background color as shown below.

Here's the output after inputting the following above values in the BackgroundColor property

BorderColor

This property gets and sets a color value property to the bar’s borders. We can specify the colors using the .NET Framework colors, or a custom RGB standard color format, or the ARGB color format which is much better than a regular standard RGB color.

Below is a sample illustration of the border color applied to the bar. We have specified again an ARGB color of 200, 163, 163, 163.

Here's the output

Moreover, we can also set different colors for each bar's border by providing an array of colors in the color collection editor window.

For instance, lets apply the following colors in the BorderColor property

//copy the colors line by line

183, 183, 183
196, 40, 71
20, 92, 158
250, 243, 62
236, 64, 103
3, 121, 113

Here's the interface output after setting the above border colors.

BorderSkipped

This property gets and sets the side of the bar's border to hide. We can decide to hide the left, right top, or the bottom border stroke of the bars rendered.

To restore a complete bordered bar, set the BorderSkipped property by specifying its value as false. The false value means that the borders will be displayed on all sides of the bar.

The following is an illustration of a rendered bar chart where the top border is hidden.

BorderWidth

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

Working with Data

TargetCanvas

This property gets and sets the canvas that will render BunifuBarChart. One canvas can be targetted with multiple BunifuBarCharts that have different datasets.

Data

This property gets and sets an array of numbers known as a dataset, that will be represented by BunifuBarChart

The operation of setting and assigning data to BunifuBarChart can be done by either using the Data property found on the property pane of the design mode or by the use of code. Let's look at an example of how to assign an array of data to BunifuBarChartby the code method.

 private void DashForm_Load(object sender, EventArgs e)
        {
            List<Double> profitDataList = new List<double>()
            {
                50.90,
                70,
                80,
                90,
                53,
                45,
                73
            };
            List<Double> expenseDataList = new List<double>()
            {
                50,
                75,
                30,
                50,
                43,
                95,
                73
            };
            bunifuBarChart1.Data = profitDataList;
            bunifuBarChart2.Data = expenseDataList;
        }

 Private Sub DashForm_Load(ByVal sender As Object, ByVal e As EventArgs)
			Dim profitDataList As New List(Of Double)() 
			From {50.90, 70, 80, 90, 53, 45, 73}
			Dim expenseDataList As New List(Of Double)()
			From {50, 75, 30, 50, 43, 95, 73}
			bunifuBarChart1.Data = profitDataList
			bunifuBarChart2.Data = expenseDataList
 End Sub

Run the application once you have applied the above code. The illustration below shows how the above code has been rendered on run-time.

Label

This property gets and sets the text to display on the chart’s legend. To format the label, use the Legend properties available from the canvas' properties.

Interacting with Bunifu Bar

HoverBackgroundColor

The HoverBackgroundColor property gets and sets a color value that will be displayed on the bar’s background where the mouse has been suspended on.

HoverBorderColor

The HoverBorderColor property gets or sets a color value that will be displayed on the border of the bar. When the bar is hovered, its border will display the color that has been assigned to the HoverBorderColor property.

HoverBorderWidth

This property gets and sets an integer value that can modify the width of the bar’s border, when the mouse is hovered on it.

Below is a sample illustration whereby on the event of a mouse hover on a bar, the border's width increases in size!

Take Away

BunifuBarChart is a great component to use to visualize your datasets in a simple and modern Look and Feel! The beauty of BunifuBarChart is that it automatically renders its axis in a clear format and it's highly customizable. In addition the automated spacing between the bars is uniform and consistent 👌 . Our eyes can quickly compare lengths and judge distances, of the datasets visualized in the bars making it both simple and a highly effective component to use for data analysis.