Bunifu Framework Docs
HomePricingFAQsMy Account
  • Introduction
  • Getting started
    • Requirements
    • Installation
    • Installing for .Net 5 & Above
    • Licensing
      • Managing your licenses
      • Bunifu Licensing CLI
      • Bunifu Device Remover (Deprecated)
  • BUNIFU UI
    • Controls
      • Bunifu Button
      • Bunifu Button (variant)
      • Bunifu Cards
      • Bunifu CheckBox
      • Bunifu Circle Progress
      • Bunifu Datagrid View
      • Bunifu Date Picker
      • Bunifu Drop Down
      • Bunifu Flat Button
      • Bunifu Form Caption Button
      • Bunifu Form Control Box
      • Bunifu Form Resize Icon
      • Bunifu Gradient Panel
      • Bunifu Icon Button
      • Bunifu Image Button (New)
      • Bunifu Image Button (Old)
      • Bunifu IOS Switch (1.5.3)
      • Bunifu Label
      • Bunifu Loader
      • Bunifu Picture Box
      • Bunifu Pages
      • Bunifu Panel
      • Bunifu Progress Bar
      • Bunifu Radial Gauge
      • Bunifu Radio Button
      • Bunifu Rating
      • Bunifu Range
      • Bunifu Separator
      • Bunifu Sliders
      • Bunifu Shadow Panel
      • Bunifu Shapes
      • Bunifu Switch (1.5.3)
      • Bunifu ScrollBars
      • Bunifu Toggle Switch
      • Bunifu Toggle Switch (variant)
      • Bunifu Tile Button
      • Bunifu Thin Button (1.5.3)
      • Bunifu ToolTip
      • Bunifu Textbox
      • Bunifu User Control
    • Components
      • Bunifu Color Transition
      • Bunifu Drag
      • Bunifu Elipse [Deprecated]
      • Bunifu Form Dock
      • Bunifu Form Drag
      • Bunifu Form Resizer
      • Bunifu Snackbar
      • Bunifu Transition
  • BUNIFU CHARTS
    • Introduction
      • Quick Tips
    • Chart Components
      • Bunifu Bar Chart
      • Bunifu Bubble Chart
      • Bunifu Canvas Control
      • Bunifu Doughnut Chart
      • Bunifu Horizontal bar Chart
      • Bunifu Line Chart
      • Bunifu Pie chart
      • Bunifu Polar Chart
      • Bunifu Radar Chart
  • BUNIFU DATAVIZ [Deprecated]
    • Basic Charts [Deprecated]
      • Step Line Chart [Deprecated]
      • Step Area Chart [Deprecated]
      • Spline Chart [Deprecated]
      • Pie Chart [Deprecated]
      • Line Chart [Deprecated]
      • Doughnut Chart [Deprecated]
      • Bar Chart [Deprecated]
      • Area Chart [Deprecated]
      • Column Chart [Deprecated]
    • Advanced Charts [Deprecated]
      • Stacked Column 100 Chart [Deprecated]
      • Stacked Column Chart [Deprecated]
      • Stacked Bar Chart 100 [Deprecated]
      • Stacked Bar Chart [Deprecated]
      • Stacked Area Chart 100 [Deprecated]
      • Stacked Area Chart [Deprecated]
      • Scatter Chart [Deprecated]
      • Range Spline Area Chart [Deprecated]
      • Range Column Chart [Deprecated]
      • Range Bar Chart [Deprecated]
      • Range Area Chart [Deprecated]
      • OHLC Chart [Deprecated]
      • Candle Stick Chart [Deprecated]
      • Bubble Chart [Deprecated]
Powered by GitBook
On this page
  • Overview
  • Getting started
  • Getting Started with Design View
  • Code
  • Data Properties
  • 1. Data
  • 2. Target Canvas
  • Background and border Properties
  • 1. BackgroundColor
  • 2. BorderColor
  • 3. BorderWidth
  • 4. HoverBackgroundColor
  • 5. HoverBorderColor
  • 6. HoverBorderWidth
  • Take Away

Was this helpful?

  1. BUNIFU CHARTS
  2. Chart Components

Bunifu Polar Chart

Add stunning polar charts to your data applications.

PreviousBunifu Pie chartNextBunifu Radar Chart

Last updated 3 years ago

Was this helpful?

Overview

Bunifu Polar Chart is a chart component that displays two-dimensional (2D) circular layout chart data in polar coordinates, comprising of several equal-angled segments. What varies is the segment's radius which varies depending on the value it has been set. It is helpful in presenting scales that facilitate comparison between several quantitative aspects of a situation. The example below illustrates how Bunifu Polar Chart has been beautifully crafted to display the app's data.

Getting started

Getting Started with Design View

This section explains the steps required to start creating a simple polar chart and demonstrates the primary usage of the chart control.

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.

Step 3: In the property section, set ShowXAxis, ShowYAxis, XAxesGridLines and YAxesGridlines properties to have a false value.

Step 4: Add BunifuPolarChart component to the form by dragging it from the controls' toolbox panel.

Step 5: To begin, go to the label property of the polar chart and set it to, for example, Share of State tax collection.

Step 6: On the target property of the Polar component, select bunifuCanvas1 as the target component.

Step 6: Access BunifuPolarChart's Data property and populate the collection editor with the following values:

Step 8: 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 each of the following R.G.B color sets to the color editor:

  1. 128, 255, 0

  2. 0, 255, 0

  3. 0, 255, 128

  4. 0, 255, 255

  5. 0, 128, 255

  6. 0, 0, 255

Step 9: Run the application.

We can code and render a polar chart without using the design view. Here's how to do it:

Code

void renderPolarChart()
        {
            Bunifu.Charts.WinForms.ChartTypes.BunifuPolarAreaChart bunifuPolarChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuPolarAreaChart();
            /*
             * 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             
             */
            bunifuPolarChart.Data = data;

            /*
             * Specify the target canvas
             */
            bunifuPolarChart.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)));
            }

            bunifuPolarChart.BackgroundColor = bgColors;
        }
Private Sub renderPolarChart()
    Dim bunifuPolarChart As Bunifu.Charts.WinForms.ChartTypes.BunifuPolarAreaChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuPolarAreaChart()
    ' 
    '  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             
    ' 
    bunifuPolarChart.Data = data

    ' 
    '  Specify the target canvas
    ' 
    bunifuPolarChart.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

    bunifuPolarChart.BackgroundColor = bgColors
End Sub

Let us examine Bunifu Polar charting properties.

Data Properties

1. Data

This property gets or sets a collection of values, which will be presented on the polar 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.

Setting and assigning data to the polar chart can be done by either using the Data property found on the property pane of the design mode or using code. The example below illustrates using both C# and VB.NET codes to populate the polar chart with data at run-time:

 private void Form1_Load(object sender, EventArgs e)
    {
      Dictionary<string, double> polarData = new Dictionary<string, double>();
      polarData.Add("Africa", 62);
      polarData.Add("East Mediterranean",56);
      polarData.Add("South Asia", 67);
      polarData.Add("Europe", 45);
      polarData.Add("America", 32);
      bunifuChartCanvas1.Labels = polarData.Keys.ToArray();
      bunifuPolarAreaChart1.Data = polarData.Values.ToList();
      bunifuChartCanvas1.Update();      
     }
 Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	  Dim polarData As New Dictionary(Of String, Double)()
	  polarData.Add("Africa", 62)
	  polarData.Add("East Mediterranean",56)
	  polarData.Add("South Asia", 67)
	  polarData.Add("Europe", 45)
	  polarData.Add("America", 32)
	  bunifuChartCanvas1.Labels = polarData.Keys.ToArray()
	  bunifuPolarAreaChart1.Data = polarData.Values.ToList()
	  bunifuChartCanvas1.Update()
 End Sub

Here's the polar chart output of the code above:

2. Target Canvas

This property gets or sets the canvas which will render the polar chart.

Take note of the following properties to be modified on the targetted canvas:

a) Set the ShowXAxis and ShowYAxis to false.

b) Additionally, set the properties XAxesGridLines and YAxesGridLines to false.

Background and border Properties

1. BackgroundColor

This property gets or sets a fill color to the polar segments. 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 for each segment in the color selection editor as shown below:

Each color set will correspond with the order of the data provided in the Data property.

Let's provide each segment with its background color as shown below via code:

  private void Form1_Load(object sender, EventArgs e)
        {
            List<Color> polarColors = new List<Color>()
            {
                Color.FromArgb(167, 225, 0),
                Color.FromArgb(204, 239, 0),
                Color.FromArgb(210, 250, 10),
                Color.FromArgb(220, 250, 100),
                Color.FromArgb(242, 240, 93)
            };
            bunifuPolarAreaChart1.BackgroundColor = polarColors;
            bunifuChartCanvas1.Update();
        }
	 Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
			Dim polarColors As New List(Of Color)() From {Color.FromArgb(167, 225, 0),
			 Color.FromArgb(204, 239, 0), Color.FromArgb(210, 250, 10), 
			 Color.FromArgb(220, 250, 100), Color.FromArgb(242, 240, 93)}
			bunifuPolarAreaChart1.BackgroundColor = polarColors
			bunifuChartCanvas1.Update()
	 End Sub

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

2. BorderColor

This property gets or sets a color set to a segment border. The sample form illustrates a polar chart with the border color set to:100, 0, 123

Alternatively, we can set each polar segment to have its 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 polar segment boundary. The greater the value, the denser the segment borders.

4. HoverBackgroundColor

This property sets a fill color value to a polar segment in which the mouse pointer is suspended.

5. HoverBorderColor

This property changes the border's color around the polar segment that the mouse pointer is hovering over.

6. HoverBorderWidth

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

Take Away

Bunifu Polar Chart is in essence a great chart tool that can be used as live statistical diagrams in your data-centric applications. We can name it a " radially plotted bar chart " since the chart is a cross between a bar chart (using length as a pre-attentive feature) and a pie chart (radial in nature, segments that are wider at the top, thinner in the center, ie. polar coordinates). This helps us understand the form of the chart as a means for representing data.