# Bunifu Radar Chart

## Overview

**Bunifu Radar Chart** is a data visualization component that can be used to compare observations with multiple quantitative variables. It is beneficial for determining which variables have similar values or if any variables are different from the others in the same dataset. Additionally, it is advantageous to observe whether variables have a high or low score inside a dataset, which makes them great for displaying performance.

Here is a showcase illustrating the use of Bunifu Radar chart:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcxvc9nHhjStMhd7DIt%2F-McxwXNy0M-c-wE-KEir%2FRadar%2006.gif?alt=media\&token=236c4899-abe0-48a5-846e-e586109ac6c1)

Some other scenarios where this chart type could be used:

* An Ideal chart to use when the categories have a natural cyclic order, for example, seasons of the year.
* When you want to compare the aggregate values of a number of data series

## Getting started

### Starting with design

This section explains to you the steps required to start creating a simple radar chart and demonstrate the basic usage of the chart control.

**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-McspvhpFFcLHG-KgU6f%2F-McsrgMYsitD4QrNS_m1%2Fimage.png?alt=media\&token=94da4d4b-d319-4cac-9d97-cc76ad71c49a)

**Step 2:** In the property window of the `canvas` on the **labels** property, add the following values in the string collection editor window as shown below:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-McspvhpFFcLHG-KgU6f%2F-Mcst1xFn5LTZRcwFsKI%2Fimage.png?alt=media\&token=a783b085-6f32-4fee-81a3-2e30ea70de5d)

**Step 4:** In the property section of the canvas, set `ShowXAxis ShowYAxis, XAxesGridLines` and `YAxesGridlines` properties to have a **false** value.

**Step 4:** Add `BunifuRadarChart`to the form.

**Step 5**: Go to the label property of the radar chart and set it to, for example, **Test scores for student index 001**.

**Step 6**: Access target property of the radar chart component, select `bunifuCanvas1` as the target component.

**Step 7:** Go to the data property of the radar chart component and add the following data:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mct2lRnt_aBXTvP7Qu9%2F-MctIdSvPubYeLfa0pbc%2Fimage.png?alt=media\&token=faddcf27-acd2-449f-a084-887609e4712d)

**Step 8:** Run the application.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mct2lRnt_aBXTvP7Qu9%2F-MctIPOGpRpGApGqJ9Or%2Fimage.png?alt=media\&token=6e25b783-abd3-4dc5-af99-bd5d54c89a9f)

Alternatively, we can code and render a **radar** chart without using the design view. Here's how to do it:

### Code (No design!)

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

```csharp
 void renderRadarChart()
        {
            Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart bunifuRadarChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart();
            /*
             * 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             
             */
            bunifuRadarChart.Data = data;

            /*
             * Hide grid lines
             */
            bunifuChartCanvas1.XAxesGridLines = false;
            bunifuChartCanvas1.YAxesGridLines = false;

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

            /*
             * Beautify the chart by sepcifying the colors
             */
          

            bunifuRadarChart.BackgroundColor = Color.FromArgb(r.Next(256), r.Next(256), r.Next(256));
            bunifuRadarChart.BorderColor = Color.FromArgb(r.Next(256), r.Next(256), r.Next(256));
        }
```

{% endtab %}

{% tab title="VB" %}

```csharp
Private Sub renderRadarChart()
    Dim bunifuRadarChart As Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart()
    ' 
    '  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             
    ' 
    bunifuRadarChart.Data = data

    ' 
    '  Hide grid lines
    ' 
    bunifuChartCanvas1.XAxesGridLines = False
    bunifuChartCanvas1.YAxesGridLines = False

    ' 
    '  Specify the target canvas
    ' 
    bunifuRadarChart.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"}

    ' 
    '  Beautify the chart by sepcifying the colors
    ' 


    bunifuRadarChart.BackgroundColor = Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256))
    bunifuRadarChart.BorderColor = Color.FromArgb(r.[Next](256), r.[Next](256), r.[Next](256))
End Sub

```

{% endtab %}
{% endtabs %}

##

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

## Data Properties

### 1. Data

This property gets or sets a **collection of values**, which will be plotted on the radar 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:

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

```csharp
private void Form_Load(object sender, EventArgs e)
{
    Dictionary<string, double> naturalDisasterAndItsReliefFund = new Dictionary<string, double>();
    naturalDisasterAndItsReliefFund.Add("Hurricane Katrina", 170);
    naturalDisasterAndItsReliefFund.Add("Hurricane Hurvey", 130.1);
    naturalDisasterAndItsReliefFund.Add("Hurricane Maria", 194.5);
    naturalDisasterAndItsReliefFund.Add("Hurricane Sandy", 74.1);
    naturalDisasterAndItsReliefFund.Add("Hurricane Imra", 52.5);
    naturalDisasterAndItsReliefFund.Add("Hurricane Andrew", 143.1);
    naturalDisasterAndItsReliefFund.Add("Drought", 134.2);
    naturalDisasterAndItsReliefFund.Add("Midwest flooding", 28.4);

    bunifuChartCanvas1.Labels = naturalDisasterAndItsReliefFund.Keys.ToArray();
    bunifuRadarChart1.Data = naturalDisasterAndItsReliefFund.Values.ToList();
    bunifuChartCanvas1.Update();

}
```

{% endtab %}

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

```erlang
Private Sub Form_Load(ByVal sender As Object, ByVal e As EventArgs)
	Dim naturalDisasterAndItsReliefFund As New Dictionary(Of String, Double)()
	naturalDisasterAndItsReliefFund.Add("Hurricane Katrina", 170)
	naturalDisasterAndItsReliefFund.Add("Hurricane Hurvey", 130.1)
	naturalDisasterAndItsReliefFund.Add("Hurricane Maria", 194.5)
	naturalDisasterAndItsReliefFund.Add("Hurricane Sandy", 74.1)
	naturalDisasterAndItsReliefFund.Add("Hurricane Imra", 52.5)
	naturalDisasterAndItsReliefFund.Add("Hurricane Andrew", 143.1)
	naturalDisasterAndItsReliefFund.Add("Drought", 134.2)
	naturalDisasterAndItsReliefFund.Add("Midwest flooding", 28.4)

	bunifuChartCanvas1.Labels = naturalDisasterAndItsReliefFund.Keys.ToArray()
	bunifuRadarChart1.Data = naturalDisasterAndItsReliefFund.Values.ToList()
	bunifuChartCanvas1.Update()

End Sub

```

{% endtab %}
{% endtabs %}

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

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcx0IR0ryvr2W2pw8uH%2F-McxDQF0ZzAyOSxeJJGr%2FRadar%2003.gif?alt=media\&token=cb8f4c2a-b548-4fa2-b4bc-2b3a59cf81cc)

### 2. Target Canvas

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

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

One can target one canvas with multiple radar charts in the case where there is a need to display and analyze different datasets of one category.

Here is an illustration where we have multiple radar charts targetted to one canvas:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcx0IR0ryvr2W2pw8uH%2F-McxrKRIIi879jAB19cF%2FRadar%2004.gif?alt=media\&token=2be86d4f-23fb-45fc-a9b8-0039c373f1f8)

### 3. Label

This property gets or sets the text to be displayed on the chart's legend. The label indicates what the data represents.

### 4. Order

This property gets and sets the z-order index of a dataset in the case where there are multiple datasets targetted to one canvas. A dataset having a less order number will appear above other radar charts.&#x20;

The following code below illustrates how the radar charts have been reordered different order numbers during the form load event:

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

```csharp
        private void Form4_Load(object sender, EventArgs e)
        {
            //this chart will appear as the first plot in the canvas; compare the legend's positioning
            bunifuRadarChart2.Order = -1;
            //this chart will appear as the second plot in the canvas below Bunifu radar chart 2
            bunifuRadarChart1.Order = 1;
        }
```

{% endtab %}

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

```erlang
		Private Sub Form4_Load(ByVal sender As Object, ByVal e As EventArgs)
			'this chart will appear as the first plot in the canvas; compare the legend's positioning
			bunifuRadarChart2.Order = -1
			'this chart will appear as the second plot in the canvas below Bunifu radar chart 2
			bunifuRadarChart1.Order = 1
		End Sub

```

{% endtab %}
{% endtabs %}

## **Border (Line plot) properties**

### 1. BorderColor

This property gets or sets an R.G.B color value for the radar line plot.&#x20;

### 2. BorderWidth

This property gets and sets an integer value that changes the radar line plot's width. The greater the value, the denser the line plot.

## **Background properties**

### **1. BackgroundColor**

This property gets a color value that sets the inner area of the radar chart.

{% hint style="warning" %}
This property works when the **Fill** property is set to the value`Start`
{% endhint %}

Additionally, it can be used to set the data point's color value, although the color value will be overwritten if the PointColor property is set to a color value.

### 2. Fill

This property sets or gets the fill style for the radar's background color. The following are the possible values to use in the property:

**Start:** Fills the background color on the bounded line plot area

**False:** This is the default value of rendering a line chart.  It renders a line plot without a background color around the boundary line.&#x20;

The code below illustrates how the fill has been applied in the radar plot:

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

```csharp
    private void Form4_Load(object sender, EventArgs e)
        {
            bunifuRadarChart1.Fill = "Start";
            bunifuRadarChart1.BackgroundColor = Color.DodgerBlue;
        }
    }
```

{% endtab %}

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

```erlang
	Private Sub Form4_Load(ByVal sender As Object, ByVal e As EventArgs)
			bunifuRadarChart1.Fill = "Start"
			bunifuRadarChart1.BackgroundColor = Color.DodgerBlue
	End Sub
	}

```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
This property is functional when a background color value is provided
{% endhint %}

## **Data Point properties**

### **1. PointBackgroundColor**

This property sets or gets a data point background color on the radar line plot.&#x20;

### **2. PointBorderColor**

This property gets and sets a color value to the point's border.

### **3. PointBorderWidth**

This property gets and sets an integer number that changes the border width of the line's data points.

### **4. PointRadius**

This property gets or sets the integer value that decreases or increases the radius of a point (i.e. distance from the point’s center to its border). It can as well be used to enlarge the points on a line plot.&#x20;

### **5. PointStyle**

This property gets or sets a shape (circle, star, line, etc...) to render as a data point on the radar plot.&#x20;

The code below shows how the radar chart has been applied a point style of  a rounded rectangle during the form load event:

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

```csharp
  private void Form_Load(object sender, EventArgs e)
        {
            bunifuRadarChart1.PointStyle = Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart.PointStyles.RectRounded;
            bunifuRadarChart1.PointRadius = 8;
            bunifuRadarChart1.PointHoverRadius = 10;
        }
```

{% endtab %}

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

```erlang
  Private Sub Form_Load(ByVal sender As Object, ByVal e As EventArgs)
			bunifuRadarChart1.PointStyle = Bunifu.Charts.WinForms.ChartTypes.BunifuRadarChart.PointStyles.RectRounded
			bunifuRadarChart1.PointRadius = 8
			bunifuRadarChart1.PointHoverRadius = 10
  End Sub

```

{% endtab %}
{% endtabs %}

Here's the output of the above code:

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mcxvc9nHhjStMhd7DIt%2F-Mcy2te61-4zqrO8kM6F%2FRadar%2007.gif?alt=media\&token=765b0633-dc3a-44bc-bf93-fb8a190dbecf)

### **6. PointRotation**

This property gets or sets the integer value that changes the angle of points on a radar plot.

### **7. PointHoverBackgroundColor**

This property sets a color value property to the point's background when hovered.

### **8.  PointHoverBorderWidth**

This property sets an integer value property to the point's border width on a mouse hover. When a mouse pointer hovers over a data point in a line plot, this property sets an integer value property to the point's border width.

### **9. PointHoverRadius**

This property sets the integer value that decreases or increases the radius of a point (i.e. distance from the point’s center to its border) when a mouse pointer hovers over a data point in a radar plot. It can as well be used to enlarge the hovered point on a line plot.&#x20;

## Take Away

Bunifu radar chart is particularly useful for presenting multivariate data that does not necessarily share the same scale. They are great for visualising commonality or outliers, or to compare metrics for multiple entities (such as performance metrics for several business units).

The goal of Bunifu radar chart is to visually represent one or more groups of values over multiple variables.

For example, let’s say you want to visually represent restaurants over some set of common variables — such as food quality, food variety, service quality, and others (*spoiler alert:* you’ll do that later). Radar charts should be a go-to visualization type for this scenario.

You now know what Bunifu radar chart is and when it makes sense to use it.

##

##

##