Overview

Bunifu doughnut is a circular chart component that can be used to present simple, relational and compact proportions of data. It works best in displaying data with a small number of categories (2-5). It is also capable of displaying multiple nested data series. Here’s an example:

Getting Started

This section explains you the steps required to start creating a simple doughnut chart and demonstrate the basic usage of the chart control.

Step 1: Drag the canvas control to the form from the toolbox. In the property section set both XAxesGridLines and YAxesGridlines properties to have a false value

Step 2: From the toolbox drag and drop the Bunifu Doughnut component to the form

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

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

Step 5: Run the application

Code

void renderDoughtnut()
        {
            Bunifu.Charts.WinForms.ChartTypes.BunifuDoughnutChart bunifuBarChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuDoughnutChart();
            /*
             * 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             
             */
            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" };
​
​
            /*
             * Hide grid lines
             */
            bunifuChartCanvas1.XAxesGridLines = false;
            bunifuChartCanvas1.YAxesGridLines = false;
​
            /*
             * 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 renderDoughtnut()
    Dim bunifuBarChart As Bunifu.Charts.WinForms.ChartTypes.BunifuDoughnutChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuDoughnutChart()
    ' 
    '  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             
    ' 
    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"}
​
​
    ' 
    '  Hide grid lines
    ' 
    bunifuChartCanvas1.XAxesGridLines = False
    bunifuChartCanvas1.YAxesGridLines = False
​
    ' 
    '  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 Doughnut chart appearance

BackgroundColor

Gets and sets a color value property to the doughnut’s segment background

BorderColor

Gets and sets a color value property to the doughnut’s segment borders

BorderWidth

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

Working with Data

TargetCanvas

Gets and sets the canvas that will render Bunifu doughnut chart

Data

Gets and sets an array of numbers as the datasets for Bunifu doughnut chart

Label

Gets and sets the text to draw on the chart’s legend

Doughnut Interactivity

HoverBackgroundColor

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

HoverBorderColor

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

HoverBorderWidth

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