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;
}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;
}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.
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;
}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.
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.
Last updated
Was this helpful?