Bunifu Doughnut Chart

Overview
Bunifu Doughnut Chart is a chart control that visualizes the proportion of a value related to the whole in a data series. The proportions of each value create the size of each slice. Each slice represents a subset of a bigger total. It somewhat remedies this problem by de-emphasizing the use of the proportional area just as in the pie charts. Instead, readers focus more on reading the length of the arcs, rather than comparing the proportions between slices. Here’s an example:
Getting Started 
Starting With Design 
This section explains the steps required to start creating a simple doughnut chart using sample data:
Step 1: Drag the canvas control to the form from the toolbox. 
Step 2:  Access the canvas label property and add the following values in the collection editor window.
Step 3: From the toolbox, drag and drop the BunifuDoughnutChart to the form.
Step 4: To begin, go to the pie chart property section and set the label property to, for example, Share in G.D.P - 2021.
Step 5: Access BunifuDoughnutChart's Data property and populate the double collection editor with the following values:
Step 6: On the target property of the Pie component, select bunifuCanvas1 as the target component where it will be rendered.
Step 7: Set a list of colors in the BackgroundColor/colors property to specify the back color for each sector in the pie chart. For instance, the following is a list of colors assigned to the sectors in the color collection editor.
Step 7: Advance to the canvas properties and set the value of the XAxesGridLines and YAxesGridLines properties to false. Also, set the properties ShowXAxis and ShowYAxis to false.
Step 8: Run the application.
Doughnut chart legends are often located on either the bottom, right or left side of the pie chart. By setting the LegendPostion property of the canvas to value right, we can place the legends to the right of the pie, rather than above it.
We can code and render a pie chart without using the design view. Here's how to do it:
Getting Started With Run-time Codes
C#
VB
1
void renderDoughtnut()
2
        {
3
            Bunifu.Charts.WinForms.ChartTypes.BunifuDoughnutChart bunifuBarChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuDoughnutChart();
4
            /*
5
             * For this example we will use random numbers
6
             */
7
            var r = new Random();
8
​
9
            /*
10
             * Add your data from your source - accepts double list
11
             * Below is an example from a random number
12
             */
13
            List<double> data = new List<double>();
14
​
15
            for (int i = 0; i < 5; i++)
16
            {
17
                data.Add(r.NextDouble());
18
            }
19
            /*
20
             * Set your data             
21
             */
22
            bunifuBarChart.Data = data;
23
​
24
            /*
25
             * Specify the target canvas
26
             */
27
            bunifuBarChart.TargetCanvas = bunifuChartCanvas1;
28
​
29
            /*
30
             * Add labels to your canvas
31
             * Label count should correspond to data count for charts like Bar charts
32
             */
33
            bunifuChartCanvas1.Labels = new string[] { "Label1", "Label2", "Label3", "Label4", "Label5" };
34
​
35
​
36
            /*
37
             * Hide grid lines
38
             */
39
            bunifuChartCanvas1.XAxesGridLines = false;
40
            bunifuChartCanvas1.YAxesGridLines = false;
41
​
42
            /*
43
             * Beautify the chart by sepcifying the colors
44
             * Color count should correspond to data count
45
             */
46
            List<Color> bgColors = new List<Color>();
47
            for (int i = 0; i < data.Count; i++)
48
            {
49
                bgColors.Add(Color.FromArgb(r.Next(256), r.Next(256), r.Next(256)));
50
            }
51
​
52
            bunifuBarChart.BackgroundColor = bgColors;
53
        }
Copied!
1
Private Sub renderDoughtnut()
2
    Dim bunifuBarChart As Bunifu.Charts.WinForms.ChartTypes.BunifuDoughnutChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuDoughnutChart()
3
    ' 
4
    '  For this example we will use random numbers
5
    ' 
6
    Dim r = New Random()
7
​
8
    ' 
9
    '  Add your data from your source - accepts double list
10
    '  Below is an example from a random number
11
    ' 
12
    Dim data As List(Of Double) = New List(Of Double)()
13
​
14
    For i As Integer = 0 To 5 - 1
15
        data.Add(r.NextDouble())
16
    Next
17
​
18
    ' 
19
    '  Set your data             
20
    ' 
21
    bunifuBarChart.Data = data
22
​
23
    ' 
24
    '  Specify the target canvas
25
    ' 
26
    bunifuBarChart.TargetCanvas = bunifuChartCanvas1
27
​
28
    ' 
29
    '  Add labels to your canvas
30
    '  Label count should correspond to data count for charts like Bar charts
31
    ' 
32
    bunifuChartCanvas1.Labels = New String() {"Label1", "Label2", "Label3", "Label4", "Label5"}
33
​
34
​
35
    ' 
36
    '  Hide grid lines
37
    ' 
38
    bunifuChartCanvas1.XAxesGridLines = False
39
    bunifuChartCanvas1.YAxesGridLines = False
40
​
41
    ' 
42
    '  Beautify the chart by sepcifying the colors
43
    '  Color count should correspond to data count
44
    ' 
45
    Dim bgColors As List(Of Color) = New List(Of Color)()
46
​
47
    For i As Integer = 0 To data.Count - 1
48
        bgColors.Add(Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256)))
49
    Next
50
​
51
    bunifuBarChart.BackgroundColor = bgColors
52
End Sub
53
​
Copied!
​
Let us examine Bunifu Doughnut charting properties.
Data properties
1. Data
This property gets or sets a collection of values that will be visualized on the doughnut chart. The order in which data values are added to the property will correspond to the order in which the canvas's label values are input. 
To reflect the intended label's value data effectively, data must be provided in the correct order relative to the canvas's labels.
Here is an example of how to use code to populate the doughnut chart with data at run-time.
C#
VB.NET
1
private void DataForm_Load(object sender, EventArgs e)
2
{
3
    Dictionary<string, double> immunizationDataKeyValues = new Dictionary<string, double>();
4
    immunizationDataKeyValues.Add("Europe", 76);
5
    immunizationDataKeyValues.Add("Western Pacific", 74);
6
    immunizationDataKeyValues.Add("SouthEast Asia", 63);
7
    immunizationDataKeyValues.Add("Africa", 59);
8
    immunizationDataKeyValues.Add("Eastern Meditarranean", 68);
9
​
10
    //new ordered list
11
    List<string> regionList = new List<string>();
12
    List<double> regionImmunizationData = new List<double>();
13
​
14
    foreach(var item in immunizationDataKeyValues.OrderByDescending(i => i.Value))
15
    {
16
        //add the ordered items in a separate list
17
        regionList.Add(item.Key);
18
        regionImmunizationData.Add(item.Value);
19
    }
20
    //map the region list into an array and assign the array to the label property of the canvas
21
    bunifuChartCanvas1.Labels = regionList.ToArray();
22
    //assign the data property of BunifuDoughnutChart with the region immnunization data 
23
    bunifuDoughnutChart1.Data = regionImmunizationData;
24
​
25
}
Copied!
1
Option Infer On
2
​
3
Private Sub DataForm_Load(ByVal sender As Object, ByVal e As EventArgs)
4
	Dim immunizationDataKeyValues As New Dictionary(Of String, Double)()
5
	immunizationDataKeyValues.Add("Europe", 76)
6
	immunizationDataKeyValues.Add("Western Pacific", 74)
7
	immunizationDataKeyValues.Add("SouthEast Asia", 63)
8
	immunizationDataKeyValues.Add("Africa", 59)
9
	immunizationDataKeyValues.Add("Eastern Meditarranean", 68)
10
​
11
	'new ordered list
12
	Dim regionList As New List(Of String)()
13
	Dim regionImmunizationData As New List(Of Double)()
14
​
15
	For Each item In immunizationDataKeyValues.OrderByDescending(Function(i) i.Value)
16
		'add the ordered items in a separate list
17
		regionList.Add(item.Key)
18
		regionImmunizationData.Add(item.Value)
19
	Next item
20
	'map the region list into an array and assign the array to the label property of the canvas
21
	bunifuChartCanvas1.Labels = regionList.ToArray()
22
	'assign the data property of BunifuDoughnutChart with the region immnunization data 
23
	bunifuDoughnutChart1.Data = regionImmunizationData
24
​
25
End Sub
26
​
Copied!
​
Here's the visualized graphical data after running the codes shown above. The data is loaded during the form load event.
2. TargetCanvas
This property gets or sets the canvas that will be used to show Bunifu doughnut chart.
Take note of the following properties to be modified on the canvas:
a) Set the ShowXAxis and ShowYAxis to false.
b) Additionally, set the properties XAxesGridLines and YAxesGridLines to false.
c) Assign the LegendPosition property to a value that is either bottom, left, or right.
If more than one data series needs to be displayed, one can target multiple Bunifu Doughnut charts in a single canvas. Thus, by combining many doughnut charts, a ring of doughnut charts will form above and around each other, each of which will display a separate data series.
The sample showcase illustrates a scenario in which the canvas is targeted with multiple Bunifu Doughnut charts, each displaying a distinct data series:
Background and Border Properties
1. BackgroundColor
This property gets or sets the doughnut sectors' 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. The background color of each sector is set by adding color sets to the color selection editor.
Each color set will correspond with the order of the data provides in the Data property the sector of the pie chart.
Let's provide each sector with its own background color as shown below via code:
C#
VB.NET
1
      private void Form1_Load(object sender, EventArgs e)
2
        {
3
            List<Color> sectorColors = new List<Color>();
4
            Color[] colors = new Color[6];
5
            colors[0] = Color.FromArgb(105, 48, 195);
6
            colors[1] = Color.FromArgb(93, 102, 208);
7
            colors[2] = Color.FromArgb(83, 144, 217);
8
            colors[3] = Color.FromArgb(72, 191, 227);
9
            colors[4] = Color.FromArgb(100, 223, 223);
10
            colors[5] = Color.FromArgb(128, 255, 219);
11
            sectorColors.AddRange(colors);
12
            bunifuPieChart1.BackgroundColor = sectorColors;
13
        }
Copied!
1
	  Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
2
			Dim sectorColors As New List(Of Color)()
3
			Dim colors(5) As Color
4
			  colors(0) = Color.FromArgb(105, 48, 195)
5
        colors(1) = Color.FromArgb(93, 102, 208)
6
        colors(2) = Color.FromArgb(83, 144, 217)
7
        colors(3) = Color.FromArgb(72, 191, 227)
8
        colors(4) = Color.FromArgb(100, 223, 223)
9
        colors(5) = Color.FromArgb(128, 255, 219)
10
			sectorColors.AddRange(colors)
11
			bunifuPieChart1.BackgroundColor = sectorColors
12
	  End Sub
13
​
Copied!
Here's the output of the colors from the code above:
2. BorderColor
This property gets or sets a color set to a doughnut chart sector border. The sample form illustrates a doughnut chart with the border color set to: 105, 48, 195
Alternatively, we can set each pie sector to have its own border color by adding additional color sets to its color collection editor.
Take note that the order in which the border colors in the color collection editor are set will correspond to the order in which the data in the Data property is defined. 
​
3. BorderWidth
This property gets and sets an integer value that changes the width of the doughnut sector border. The greater the value, the denser the sector borders.
4. HoverBackgroundColor
This property sets a back color value to a doughnut sector when hovered.
5. HoverBorderColor
This property changes the color of the border around a doughnut sector when hovered
6. HoverBorderWidth
This property specifies an integer value that alters the boundary width of a targetted doughnut sector when hovered
Take Away
Since, it can be quite difficult to compare different sections of the doughnut chart, just like with a pie chart, doughnut charts are best used to compare the size of a particular slice with the whole, rather than comparing individual sections of the donut chart with each other.
Just like a pie chart, a doughnut chart shows the relationship of parts to a whole, but a doughnut chart can contain more than one data series. Each data series that you plot in a doughnut chart adds a ring to the chart.