Bunifu Pie chart

Create beautiful pie charts for your dashboards with Bunifu Pie charts.

Overview

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:

Getting Started

Getting Started With Design View

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:

Code

C#

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

VB

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.

Data properties

1. Data

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#

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

VB.NET

  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

2. TargetCanvas

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.

Background and Border Properties

1. BackgroundColor

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#

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

VB.NET

	  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

2. BorderColor

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.

3. BorderWidth

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.

4. HoverBackgroundColor

This property sets a back color value to a pie chart sector/slice on which the mouse pointer is suspended.

5. HoverBorderColor

This property changes the color of the border around a pie sector that the mouse pointer is hovering over.

6. HoverBorderWidth

This property specifies an integer value that alters the boundary width of a targetted pie chart sector over which the mouse pointer is hovering.

Take Away

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.