# 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 `BunifuBarChart`component to render data.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-M_fZJK7C_aoBHZ3bOE6%2F-M_f_iy5k6rW-asbmtIl%2Fbn8.gif?alt=media\&token=742dc803-b879-4c56-bc26-96d11698f18e)

## 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:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXkrKc3-s7Ckh8XpBSt%2F-MXl-0j-_oKB6Umkws8O%2Fimage.png?alt=media\&token=f341a79d-a640-409c-9a7f-8e8cf8cd75a4)

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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXkkyUQc3mERFdAcLiv%2F-MXkpUSWjnLiauBJX-_S%2Fimage.png?alt=media\&token=f64a138c-6b5b-4c48-accc-9ba060e7beb9)

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:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXkrKc3-s7Ckh8XpBSt%2F-MXl1upReJHRgGj_RwxE%2Fimage.png?alt=media\&token=64f048e3-7f2b-4268-95cd-1fc8d08ed33a)

Step 5: Run the application

Here's the result when running the application

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXkrKc3-s7Ckh8XpBSt%2F-MXl2wRa5u6bb3Ouw1QE%2Fimage.png?alt=media\&token=fc4a0eb7-c352-4800-b8a0-050792405077)

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

### Code

{% tabs %}
{% tab title="C#" %}

```csharp
  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;
        }
```

{% endtab %}

{% tab title="VB" %}

```csharp
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

```

{% endtab %}
{% endtabs %}

## 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.&#x20;

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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXp_k2v5-1EKq1_lIxY%2F-MXpnzW7DcUA4OgDGKL_%2Fimage.png?alt=media\&token=eaa6d80f-b31a-4afb-a5fb-110c826f07da)

{% hint style="info" %}
:man\_detective: Notice how nice the transparent background color has been applied to the bars. Awesome!
{% endhint %}

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXp_k2v5-1EKq1_lIxY%2F-MXprJUkptxE6vIJQtnm%2Fimage.png?alt=media\&token=3ddb666e-8c15-4b19-b961-97240aa1fcf2)

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.

{% hint style="info" %}
&#x20;:magnet: 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`

{% endhint %}

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

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXqBRjmAHLWILBWhuH_%2F-MXqBi8aXHThy37xIlBl%2Fimage.png?alt=media\&token=b9e84dca-fc08-4f3d-8d6d-98f9e749a1e1)

{% hint style="success" %}
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.
{% endhint %}

### 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

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXqku7qqt4yDM4Tz8TE%2F-MXqmBqWIMM_TnBzIUYP%2Fimage.png?alt=media\&token=c91cb09f-a696-4e5a-8a5b-c0e476a1c1b7)

{% hint style="info" %}
:man\_detective: To be able to see the border we should increase the **width** of the border using the`BorderWidth` property. In the example above we have set a border width of **4**.
{% endhint %}

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`

```groovy
//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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXrpVZYmBLtP91bEuu6%2F-MXrsrfT2Wok4UAUoDRZ%2Fimage.png?alt=media\&token=063248ba-78fa-46fa-986f-3165065415fb)

### 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.

{% hint style="info" %}
The following values can be used in the `BorderSkipped` property

1. bottom
2. left
3. top
4. right
   {% endhint %}

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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXs0hPvWf2-8KDpeQex%2F-MXs2xBFosWwGher6666%2Fimage.png?alt=media\&token=ea5919c9-f631-42d0-9ff0-671d8de2250c)

### 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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXv686Ij3oTUObRRGqX%2F-MXv6zVF6d8Wgqk-TguA%2FBarchart%2005.gif?alt=media\&token=83babbac-a3ed-4050-9570-1dba8008c876)

### 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 `BunifuBarChart`by the code method.

{% hint style="info" %}
Note that:&#x20;

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

{% tabs %}
{% tab title="C#" %}

```csharp
 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;
        }
```

{% endtab %}

{% tab title="VB.NET" %}

```fsharp
 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

```

{% endtab %}
{% endtabs %}

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

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MXvN4a1ejXl497YRrm2%2F-MXvOWI8qa3hLT_mN6eZ%2Fimage.png?alt=media\&token=9e74f129-67d0-4073-9bdd-e01415ce4371)

### 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.

{% hint style="info" %}
The illustration below shows an example of the above statement
{% endhint %}

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MY0qNEilvBxm_zKoXF5%2F-MY0wSc-sBzYLne6vPW0%2FBar%2009.gif?alt=media\&token=a51ddfad-ea54-4063-a566-35441a361ce7)

### 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.

{% hint style="info" %}
For this property to function well, ensure that the `BorderWidth` has been set with an integer value which is not less than 1.
{% endhint %}

### 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!

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MY0qNEilvBxm_zKoXF5%2F-MY0slU0zL9UJYZQ5EIu%2FBar%2006.gif?alt=media\&token=8963af8c-4942-463d-a7d4-70714324367e)

## 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 :ok\_hand: . 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.&#x20;