Bunifu Doughnut Chart

Pimp up your app data visualization with single and multi-layered doughnut charts.

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

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

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.

private void DataForm_Load(object sender, EventArgs e)
{
    Dictionary<string, double> immunizationDataKeyValues = new Dictionary<string, double>();
    immunizationDataKeyValues.Add("Europe", 76);
    immunizationDataKeyValues.Add("Western Pacific", 74);
    immunizationDataKeyValues.Add("SouthEast Asia", 63);
    immunizationDataKeyValues.Add("Africa", 59);
    immunizationDataKeyValues.Add("Eastern Meditarranean", 68);

    //new ordered list
    List<string> regionList = new List<string>();
    List<double> regionImmunizationData = new List<double>();

    foreach(var item in immunizationDataKeyValues.OrderByDescending(i => i.Value))
    {
        //add the ordered items in a separate list
        regionList.Add(item.Key);
        regionImmunizationData.Add(item.Value);
    }
    //map the region list into an array and assign the array to the label property of the canvas
    bunifuChartCanvas1.Labels = regionList.ToArray();
    //assign the data property of BunifuDoughnutChart with the region immnunization data 
    bunifuDoughnutChart1.Data = regionImmunizationData;

}

Option Infer On

Private Sub DataForm_Load(ByVal sender As Object, ByVal e As EventArgs)
	Dim immunizationDataKeyValues As New Dictionary(Of String, Double)()
	immunizationDataKeyValues.Add("Europe", 76)
	immunizationDataKeyValues.Add("Western Pacific", 74)
	immunizationDataKeyValues.Add("SouthEast Asia", 63)
	immunizationDataKeyValues.Add("Africa", 59)
	immunizationDataKeyValues.Add("Eastern Meditarranean", 68)

	'new ordered list
	Dim regionList As New List(Of String)()
	Dim regionImmunizationData As New List(Of Double)()

	For Each item In immunizationDataKeyValues.OrderByDescending(Function(i) i.Value)
		'add the ordered items in a separate list
		regionList.Add(item.Key)
		regionImmunizationData.Add(item.Value)
	Next item
	'map the region list into an array and assign the array to the label property of the canvas
	bunifuChartCanvas1.Labels = regionList.ToArray()
	'assign the data property of BunifuDoughnutChart with the region immnunization data 
	bunifuDoughnutChart1.Data = regionImmunizationData

End Sub

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:

      private void Form1_Load(object sender, EventArgs e)
        {
            List<Color> sectorColors = new List<Color>();
            Color[] colors = new Color[6];
            colors[0] = Color.FromArgb(105, 48, 195);
            colors[1] = Color.FromArgb(93, 102, 208);
            colors[2] = Color.FromArgb(83, 144, 217);
            colors[3] = Color.FromArgb(72, 191, 227);
            colors[4] = Color.FromArgb(100, 223, 223);
            colors[5] = Color.FromArgb(128, 255, 219);
            sectorColors.AddRange(colors);
            bunifuPieChart1.BackgroundColor = sectorColors;
        }

	  Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
			Dim sectorColors As New List(Of Color)()
			Dim colors(5) As Color
			  colors(0) = Color.FromArgb(105, 48, 195)
        colors(1) = Color.FromArgb(93, 102, 208)
        colors(2) = Color.FromArgb(83, 144, 217)
        colors(3) = Color.FromArgb(72, 191, 227)
        colors(4) = Color.FromArgb(100, 223, 223)
        colors(5) = Color.FromArgb(128, 255, 219)
			sectorColors.AddRange(colors)
			bunifuPieChart1.BackgroundColor = sectorColors
	  End Sub

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.

PreviousBunifu Canvas Control NextBunifu Horizontal bar Chart

Last updated 2 years ago