# 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:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcml1sVui8AbHlkz-oB%2F-McmnIvcwD_Iko5YMwJg%2Fdougnut05.gif?alt=media\&token=4373a3a8-06d8-4195-9649-152e8e144fdc)

## 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. 

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcf1vPZPkkbU669L2_z%2F-Mch_fhvgOJm2L-WhJ59%2Fimage.png?alt=media\&token=6c4ad46a-e7ae-4495-80ec-c147a20cb8a7)

**Step 2:**  Access the canvas **label** property and add the following values in the collection editor window.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcf1vPZPkkbU669L2_z%2F-MchaCjpVrL3aEUU_e-C%2Fimage.png?alt=media\&token=79486043-4bd9-4a7a-830d-7753bfcd3a53)

**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:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcf1vPZPkkbU669L2_z%2F-MchddwgyQXt_lyqQAQI%2Fimage.png?alt=media\&token=92e39cff-c428-406d-87d3-7eece21a2763)

**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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcf1vPZPkkbU669L2_z%2F-MchiSYZm9WEvbPtXctw%2Fimage.png?alt=media\&token=4e85ad59-4a58-4f09-8f87-cca7ef6cce35)

**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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcf1vPZPkkbU669L2_z%2F-Mchj4RHjk8NREkYWign%2Fimage.png?alt=media\&token=c3d5f8b2-79c5-4921-84e9-c62273aeb148)

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.

{% hint style="success" %}
We can code and render a pie chart without using the design view. Here's how to do it:
{% endhint %}

### Getting Started With Run-time Codes

{% tabs %}
{% tab title="C#" %}

```csharp
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;
        }
```

{% endtab %}

{% tab title="VB" %}

```erlang
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

```

{% endtab %}
{% endtabs %}

##

{% hint style="success" %}
Let us examine Bunifu Doughnut charting properties.
{% endhint %}

## 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.&#x20;

{% hint style="warning" %}
To reflect the intended label's value data effectively, data must be provided in the correct order relative to the canvas's labels.
{% endhint %}

Here is an example of how to use code to populate the doughnut chart with data at run-time.

{% tabs %}
{% tab title="C#" %}

```csharp
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;

}
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
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

```

{% endtab %}
{% endtabs %}

Here's the visualized graphical data after running the codes shown above. The data is loaded during the form load event.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MciQ9RxjpO3c4n6mi6x%2F-Mcib5KbZAbpAA9V-r8z%2Fdougnut01.gif?alt=media\&token=f56ab018-a760-40d6-a432-583988c2d604)

### 2. TargetCanvas

This property gets or sets the canvas that will be used to show Bunifu doughnut chart.

{% hint style="info" %}
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.
{% endhint %}

{% hint style="success" %}
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.
{% endhint %}

The sample showcase illustrates a scenario in which the canvas is targeted with multiple Bunifu Doughnut charts, each displaying a distinct data series:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcj_mT4QVk82Q26wfcZ%2F-Mcjf1AYYiNiBAa8oca1%2Fdougnut02.gif?alt=media\&token=e375507d-eef4-49cd-9765-1fdb8a5437a1)

## 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:

{% tabs %}
{% tab title="C#" %}

```csharp
      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;
        }
```

{% endtab %}

{% tab title="VB.NET" %}

```erlang
	  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

```

{% endtab %}
{% endtabs %}

Here's the output of the colors from the code above:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcj_mT4QVk82Q26wfcZ%2F-Mcjes6Ez7qr9HEQGn2Z%2Fdougnut03.gif?alt=media\&token=2d762b0d-676f-4416-b63f-abce6fcbb08b)

### **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`

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcj_mT4QVk82Q26wfcZ%2F-Mcjg12Wqgv0kIWJK2m8%2Fimage.png?alt=media\&token=0ebe5115-499a-4f00-9733-2bb48f73c730)

Alternatively, we can set each pie sector to have its own border color by adding additional color sets to its color collection editor.

{% hint style="info" %}
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.&#x20;
{% endhint %}

### **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.