HomePricingFAQsMy Account

Bunifu Horizontal bar Chart

Bring single, grouped, and horizontally stacked bar charts to your data apps.

Overview

Bunifu Horizontal Chart is a chart component that presents datasets on proportional horizontal bars. Here, the data categories are placed on the graph's vertical axis, while the numerical values are placed on the horizontal axis of the graph.

This chart tool enables you to display lengthy discrete data from a category while still leaving room for textual information, allowing the report viewer to immediately see comparative relationships and approximate numeric values. The example below highlights the real value of a bar chart in telling the "story" of the data.

Getting Started

Getting started with design view

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

Step 1: Drag the canvas control to the form from the toolbox and set padding to it.

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

Step 3: From the toolbox drag and dropBunifuHorizontalBar to the form.

Step 4: Set the label property of BunifuHorizontalBar to, for example, (Net income profits for Q1 2021 (in billion U.S dollars)

Step 5: On the target property of the Horizontal bar component select bunifuCanvas1 as the target component.

Step 6: Access the Data property of BunifuHorizontalBar, and add the following values to the collection editor displayed as shown below:

Step 7: Go to the colors/BackgroundColor property of the Horizontal Bar and set the following color in the color collection editor:7, 162, 135

Step 8: Run the application

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

Code View

 void renderHorizontalChart()
        {
            Bunifu.Charts.WinForms.ChartTypes.BunifuHorizontalBarChart bunifuHChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuHorizontalBarChart();
            /*
             * 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.NextDouble());
            }
            /*
             * Set your data             
             */
            bunifuHChart.Data = data;

            /*
             * Specify the target canvas
             */
            bunifuHChart.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>();
            bgColors.Add(Color.Red);
            bgColors.Add(Color.Blue);
            bgColors.Add(Color.Green);
            bgColors.Add(Color.Gray);
            bgColors.Add(Color.Purple);

            bunifuHChart.BackgroundColor = bgColors;
        }

Let us examine Bunifu Horizontal Bar charting properties.

Creating Your Data

1. Target Canvas

This property gets or sets the canvas on which the horizontal bar chart will be displayed. Multiple horizontal bar charts with distinct datasets can be targeted on a single canvas, creating grouped or horizontally stacked charts.

2. Data (numerical data)

This property gets or sets a collection of both negative and positive values that the canvas will be present on the X-Axis proportionally for the horizontal bar value. The order in which data values are added to the property corresponds to how the canvas label values are put.

Setting and assigning data to the horizontal bar chart can be done by either using the Data property found on the property pane of the design mode or using code. The example below illustrates using both C# and VB.NET codes to populate the horizontal bar chart with a sorted data at run-time:

    public class FoodRevenueData
        {
            public double USData { get; set; }
            public double GermanData { get; set; }
            public double KenyanData { get; set; }
            public double FranceData { get; set; }
            public double UKData { get; set; }
            public double ChinaData { get; set; }
            public double ItalyData { get; set; }
            public double SwitzerLandData { get; set; }
        }
        private void RevenueForm_Load(object sender, EventArgs e)
        {
            //Set data to the class properties
            FoodRevenueData data = new FoodRevenueData()
            {
                USData = 44727,
                GermanData = 11970,
                FranceData = 11295,
                ChinaData = 18205,
                ItalyData = 13265,
                SwitzerLandData = 21133,
                KenyanData = 23014,
                UKData = 42299
            };
            //map the property values of the class with its key(the country!)
            Dictionary<String, Double> revenueByCountry = new Dictionary<string, double>();
            revenueByCountry.Add("United States of America", data.USData);
            revenueByCountry.Add("German", data.GermanData);
            revenueByCountry.Add("France", data.FranceData);
            revenueByCountry.Add("China", data.ChinaData);
            revenueByCountry.Add("Italy", data.ItalyData);
            revenueByCountry.Add("SwitzerLand", data.SwitzerLandData);
            revenueByCountry.Add("Kenya", data.KenyanData);
            revenueByCountry.Add("United Kingdom", data.UKData);
            /*
            * sort data in the dictionary by value in a descending order and
              assign the data to the list
            */
            List<string> y_AxisLabels = new List<string>();
            List<double> horizontalBarData = new List<double>();
           
            foreach (var countryData in revenueByCountry.OrderByDescending(x=>x.Value))
            {
                y_AxisLabels.Add(countryData.Key);
                horizontalBarData.Add(countryData.Value);
            }

            //assign the values
            bunifuChartCanvas1.Labels = y_AxisLabels.ToArray();
            bunifuHorizontalBarChart1.Data = horizontalBarData;
        }

Here's is the output of the code:

3. Label (Legend 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.

Styling the Bars Appearance

1. BackgroundColor

This property gets or sets the bar's background color value. We can specify the colors using the Red Green Blue (RGB) color format as well as the Alpha, Red, Green, and Blue (ARGB) color values in the color collection editor. By specifying a single color value in the property, the background color of all the bars in the canvas will be set to that value.

The figure below is an illustration where we have specified the ARGB color value 160, 7, 162, 135 in the color collection editor to render the bar's background color with a transparency view:

Each bar can be customized by adding additional color sets to the color selection editor. However, let us add the background colors using code that will be executed on run-time. The following code demonstrates the BackgroundColor property set with a list of colors, that will apply a distinct background color to each horizontal bar during a form load event:

      private void Form1_Load(object sender, EventArgs e)
        {
            List<Color> colorsList = new List<Color>();
            colorsList.AddRange(new Color[]{
            Color.FromArgb(7, 162, 135),
            Color.FromArgb(204, 255, 102),
            Color.FromArgb(82, 72, 156),
            Color.FromArgb(64, 98, 187),
            Color.FromArgb(83, 62, 45)
            });

            bunifuHorizontalBarChart1.BackgroundColor = colorsList;
        }

Here's the output of a multi-colored horizontal bar chart from the code above:

When using a multi-colored horizontal bar chart it is advisable to hide the chart's legend and ensure the X-axis is labelled to convey the values meaning.

To hide the legend access the canvas'sLegendDisplay property and set it to False. Whereas to label the X-axis, go to the XAxesLabel property and set to, for example, "Share of playing time (in %)".

2. 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. Below is a sample illustration of the border color applied to the bar. We have specified again an RGB color of 240, 246, 110. 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.

Additionally, we can specify different border colors for each bar by providing an array of colors in the color collection editor, but let's do so using the code method, where we shall assign the bordercolor prop with a list variable of type color:

        private void Form1_Load(object sender, EventArgs e)
        {
            List<Color> colorList = new List<Color>();
            colorList.AddRange(new Color[]
            {
                Color.FromArgb(240, 246, 110),
                Color.FromArgb(45, 45, 42),
                Color.FromArgb(50, 13, 109),
                Color.FromArgb(67, 100, 54),
                Color.FromArgb(90, 210, 244),
                Color.FromArgb(159, 164, 169)
            });
            bunifuHorizontalBarChart1.BorderColor = colorList;
        }

Here's the output of the code above which sets colored borders for each horizontal bar.

3. BorderSkipped

This property gets or sets a side value that conceals the border-stroke of the bar on the specified side. It has the following side values:

a) Top - hides the top border-stroke of each horizontal bar rendered.

b) Bottom - hides the bottom border-stroke of each horizontal bar rendered

c) Left - hides the left border-stroke of each horizontal bar rendered

d) Right - hides the right border-stroke of each horizontal bar rendered.

e) False - shows border-strokes on all the four sides of each horizontal bar rendered.

The following conditions must be met for the property to function properly:

a) Ensure that the BorderWidth prop is not set to 0.

b) Ensure that theBorderColor prop is set to a visible color.

The following code shows how to set the values of the BorderSkipped property at run-time by using Bunifu Radio Button 

  private void topBunifuRadioButton_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
        {
            if (e.Checked)
            {
                bunifuHorizontalBarChart1.BorderSkipped = "top"; 
            }
        }

    private void bottomBunifuRadioButton_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
        {
            if (e.Checked)
            {
                bunifuHorizontalBarChart1.BorderSkipped = "bottom";
        }
    }

    private void leftBunifuRadioButton_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
        {
            if (e.Checked)
            {
                bunifuHorizontalBarChart1.BorderSkipped = "left";
            }
        }

    private void rightBunifuRadioButton_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
        {
            if (e.Checked)
            {
                bunifuHorizontalBarChart1.BorderSkipped = "right";
            }
        }

    private void falseBunifuRadioButton_CheckedChanged2(object sender, Bunifu.UI.WinForms.BunifuRadioButton.CheckedChangedEventArgs e)
        {
            if (e.Checked)
            {
                bunifuHorizontalBarChart1.BorderSkipped = "false";
            }
        }

4. BorderWidth

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

Hover Event properties

1. HoverBackgroundColor

This property sets a back color value to a horizontal bar on which the mouse pointer is suspended.

2. HoverBorderColor

This property changes the color of the border around a horizontal bar that the mouse pointer is hovering over.

3. HoverBorderWidth

This property sets an integer value that changes the width of the boundary of a horizontal bar over which the mouse pointer is hovering.

Creating Horizontal Stacked Bar Charts

Bunifu Horizontal bar can also be set to render groups of segmented bars. Typically, each horizontal bar in the graph represents a data category that is further subdivided into stacked subcategories of datasets. It helps to know which subcategory contributes the most or the least to a data variable.

To stack groups of horizontal bars, simply set the X-AxisStacked property of the canvas to true.

The X-AxisStacked property is effective in rendering stacked bars when a canvas has multiple groups of horizontal bars within a category.

The following example shows three horizontal bars each containing different datasets, stacked on top of one another.

Take Away

Bunifu Horizontal Chart is a great chart tool. With minimal code generation, you can render a stunning horizontal bar chart for your data analysis applications. It is straightforward to read data; We can quickly determine which of the elements ahead of us is longer, which is the shortest.

What you should do is consider what you are trying to say about the values. Data Visualization is more than pointing out information: you’re usually presenting this information to your application users to get them to do something or learn something new.

PreviousBunifu Doughnut ChartNextBunifu Line Chart

Last updated

Was this helpful?