Bunifu Bar Chart

Clear-cut Bar charts for your apps with 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.

🕵️‍♂️ Notice how nice the transparent background color has been applied to the bars. Awesome!

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.

🧲 Copy each color value separately from the list below:

180, 30, 144, 255
180, 13, 6, 48
180, 24, 49, 79
139, 190, 178
220, 230, 249, 175
180, 168, 32, 26

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

For a multicolored background bar chart, we must ensure that the chart's legend is not visible. This is done by changing the value of LegendDisplay a property of BunifuChartCanvas from true to false.

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

🕵️‍♂️ To be able to see the border we should increase the width of the border using theBorderWidth property. In the example above we have set a border width of 4.

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.

The following values can be used in the BorderSkipped property

bottom
left
top
right

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.

Note that:

This code will be done after doing the preliminary steps of setting and styling up the canvas and BunifuBarChart in the design view.
The code below has been executed on a form load event. Other relevant events can also be used to load the data.

 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.

The illustration below shows an example of the above statement

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.

For this property to function well, ensure that the BorderWidth has been set with an integer value which is not less than 1.

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.

PreviousChart Components NextBunifu Bubble Chart

Last updated 2 years ago