Overview

Horizontal bar Charts are the simplest and most versatile of statistical diagrams. Displayed in horizontal bars, these charts are used to compare values across categories, for showing the variations in the value of an item over time. A very similar, more common, chart type is the Column Charts where the horizontal bars are rendered vertically.

Getting Started

This section explains you the steps required to start creating a simple horizontal 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 horizontal bar component to the form

Step 3: Add data to the Horizontal bar component as demonstrated in quick tips

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

Step 5: Run the application

Code

 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;
        }
​

Private Sub renderHorizontalChart()
    Dim bunifuHChart As Bunifu.Charts.WinForms.ChartTypes.BunifuHorizontalBarChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuHorizontalBarChart()
    ' 
    '  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.NextDouble())
    Next
​
    ' 
    '  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
    ' 
    Dim bgColors As List(Of Color) = New List(Of Color)()
    bgColors.Add(Color.Red)
    bgColors.Add(Color.Blue)
    bgColors.Add(Color.Green)
    bgColors.Add(Color.Gray)
    bgColors.Add(Color.Purple)
    bunifuHChart.BackgroundColor = bgColors
End Sub
​

Horizontal bar customizations

BackgroundColor

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

BorderColor

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

BorderSkipped

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

BorderWidth

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

Horizontal Horizontal bar Interactivity

HoverBackgroundColor

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

HoverBorderColor

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

HoverBorderWidth

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