Bunifu Pie chart
Create beautiful pie charts for your dashboards with Bunifu Pie charts.
Bunifu Pie chart is a chart component that generates a circular statistical graphic, in which the data is divided into slices representing the numerical proportion. Each sector corresponds to a proportional portion of the total. Consider the following example that uses Bunifu Pie Chart for data visualization:
This section explains the steps required to start creating a simple pie chart:
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
BunifuPieChart to the form.Step 4: To begin, go to the pie chart property section and set the label property to, for example, Market Value of Cloud Infrastructure.
Step 5: Access
BunifuPieChart'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.
copy the following set of colors one by one to the color editor:
- 1.38, 68, 120
- 2.140, 193, 104
- 3.112, 173, 71
- 4.68, 114, 196
- 5.255, 192, 0
- 6.67, 104, 43
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.
Pie 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:
C#
VB
void renderPieChart()
{
Bunifu.Charts.WinForms.ChartTypes.BunifuPieChart bunifuPieChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuPieChart();
/*
* 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.Next(0,50));
}
/*
* Set your data
*/
bunifuPieChart.Data = data;
/*
* Specify the target canvas
*/
bunifuPieChart.TargetCanvas = bunifuChartCanvas1;
/*
* Hide grid lines
*/
bunifuChartCanvas1.XAxesGridLines = false;
bunifuChartCanvas1.YAxesGridLines = false;
/*
* 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" };
/*
* 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)));
}
bunifuPieChart.BackgroundColor = bgColors;
}
Private Sub renderPieChart()
Dim bunifuPieChart As Bunifu.Charts.WinForms.ChartTypes.BunifuPieChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuPieChart()
'
' 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.[Next](0, 50))
Next
'
' Set your data
'
bunifuPieChart.Data = data
'
' Specify the target canvas
'
bunifuPieChart.TargetCanvas = bunifuChartCanvas1
'
' Hide grid lines
'
bunifuChartCanvas1.XAxesGridLines = False
bunifuChartCanvas1.YAxesGridLines = False
'
' 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"}
'
' 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
bunifuPieChart.BackgroundColor = bgColors
End Sub
Let us examine Bunifu Pie charting properties.
This property gets or sets a collection of values that will be visualized on the pie chart. The order in which data values are added to the property corresponds to the order in which the canvas's label values are input.
Here is an example of how to use code to populate the pie chart with data at run-time.
C#
VB.NET
private void Form1_Load(object sender, EventArgs e)
{
List<Double> marketShareData = new List<double>();
Double[] shareDataPercentage = { 34.43, 87.21, 12.65, 54.22, 21, 78 };
marketShareData.AddRange(shareDataPercentage);
bunifuPieChart1.Data = marketShareData;
}
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim marketShareData As New List(Of Double)()
Dim shareDataPercentage() As Double = { 34.43, 87.21, 12.65, 54.22, 21, 78 }
marketShareData.AddRange(shareDataPercentage)
bunifuPieChart1.Data = marketShareData
End Sub
This property gets or sets the canvas on which the pie chart will be displayed.
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.
This property gets or sets the pie's 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
private void Form1_Load(object sender, EventArgs e)
{
List<Color> sectorColors = new List<Color>();
Color[] colors = new Color[6];
colors[0] = Color.FromArgb(112, 173, 71);
colors[1] = Color.FromArgb(68, 114, 196);
colors[2] = Color.FromArgb(255, 192, 0);
colors[3] = Color.FromArgb(165, 165, 165);
colors[4] = Color.FromArgb(132, 226, 150);
colors[5] = Color.FromArgb(150, 43, 4, 78);
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(112, 173, 71)
colors(1) = Color.FromArgb(68, 114, 196)
colors(2) = Color.FromArgb(255, 192, 0)
colors(3) = Color.FromArgb(165, 165, 165)
colors(4) = Color.FromArgb(132, 226, 150)
colors(5) = Color.FromArgb(150, 43, 4, 78)
sectorColors.AddRange(colors)
bunifuPieChart1.BackgroundColor = sectorColors
End Sub
This property gets or sets a color set to a pie chart sector/slice border. The sample form illustrates a pie chart with the border color set to:
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.
This property gets and sets an integer value that changes the width of the pie sector boundary. The greater the value, the denser the sector borders.
This property sets a back color value to a pie chart sector/slice on which the mouse pointer is suspended.
This property changes the color of the border around a pie sector that the mouse pointer is hovering over.
This property specifies an integer value that alters the boundary width of a targetted pie chart sector over which the mouse pointer is hovering.
Bunifu pie chart is an excellent visual chart design that communicates one important fact with the fewest visual clues possible: that the circle (the "pie") reflects some sort of whole, made up of slices. Add up all the slices and you get the complete pie. Enlarge one part, and other parts will need to shrink.
It's easy to take advantage of people's inept use of pie charts. However, when used the right way, they are very powerful: they are easy to read, familiar, and pleasant to look at. Therefore, absolute care must be taken not to overload the chart with data, but to retain the salient feature of the chart readability through the use of sparse data.
Last modified 2yr ago