Bunifu Radar Chart

Overview

A radar chart is a way of showing multiple data points and the variation between them. Radar charts, (also known as Spider charts), are categorical charts which wrap the X axis in a circle or polygon. Radar Chart is the clock face form of a line chart. It represents each data series as a line around a central point. The category (x) variable is plotted at equally spaced points around the clock. The y variable is plotted as a radius, so each category has its own y-axis radiating from the center.

Some scenarios where this chart type could be used:

  • 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

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

Step 1: Drag the canvas control to the form from the toolbox

Step 2: From the toolbox drag and drop the Bunifu Radar component to the form

Step 3: Add data to the Radar component as demonstrated in quick tips

Step 4: On the target property of the Radar component select bunifuCanvas1 as the target component

Step 5: Run the application

Code

C#
VB
C#
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));
}
VB
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

Working with data

TargetCanvas

Gets and sets the canvas that will render the radar components

Data

Gets and sets an array of numbers as the datasets for the radar charts

Label

Gets and sets the text to draw on the chart’s legend

Styling the radar’s appearance

Order

Gets and sets the z-order index of a dataset in the case of multiple datasets. A dataset having a less order number will be displayed in front of other datasets

ShowLine

Gets and sets a Boolean value to whether the line’s dataset will be drawn on the canvas. A false value will hide the radar line plot.

SpanGaps

Gets and sets a Boolean value to whether lines will be drawn between data points. A true value draws lines to data points with null value category

BackgroundColor property

Gets and sets the legend’s mark background color when the PointBackgroundColor has a value. Also it sets the points back color when there is a null value in the PointsBackgroundColor property

Border customization

BorderCapStyle

Gets and sets the cap style at the end of a line’s border. Values include:

Butt - sets the squared off lines at the endpoints. Default value.

Round - sets rounded ends on the line’s border.

Square - The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.

BorderDash

Gets and sets an array of numbers that specify distances to alternately draw a line length and a gap (in coordinate space units). For example, [5, 15] will render a line length of 5 pixels with 15 gaps. If the array is empty, the line dash list is cleared and line strokes return to being solid.

BorderDashOffset

Gets and sets the line’s border offset for rendering an associated array of radar line dashes. An offset will change the line’s horizontal position and set it to a different position. Note a maximum offset is equal to the line length specified in the Border dash property

BorderJoin

Gets and sets the shape value to render where two different radar line segments meet. Values to render can be miter, bevel and round.

BorderWidth

Gets and sets an integer value that can modify the width of the radar line’s border.

Point Styling & Customization

PointBackgroundColor

Gets and sets a color value property to the radar’s point background

PointBorderColor

Gets and sets a color value property to the radar’s point border

PointBorderWidth

Gets and sets an integer value that can modify the width of the point’s border.

PointHitRadius

Gets and sets the integer value that can change the radius on of an non-displayed point

PointRadius

Gets and sets the integer value that can change the radius (i.e. distance from the point’s center)

PointRotation

Gets and sets the integer value that can change the angle of the point

PointStyle

Gets and sets a shape value to display as a point on the radar chart

Point Interactivity

PointHoverBackgroundColor

Gets and sets a color value property to the radar’s point background on a mouse hover event

PointHoverBorderWidth

Gets and sets an integer value property to the radar’s point width on a mouse hover event

PointHoverRadius

Gets and sets the integer value that can change the radius (i.e distance from the center) of the point on a mouse hover event