Bunifu Line Chart

Overview

Bunifu line is a chart component that renders a dataset as a single line path on the canvas; a perfect candidate for showing a trend of data. It can also be customized to render area charts suitable for displaying quantitative data, often for comparing two sets of data. Bunifu lines can be set to render either straight, spline or stepped line charts.

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 Line component to the form

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

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

Step 5: Run the application

Code

C#
VB
C#
void renderLineChart()
{
Bunifu.Charts.WinForms.ChartTypes.BunifuLineChart bunifuLineChart = new Bunifu.Charts.WinForms.ChartTypes.BunifuLineChart();
/*
* 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>();
data.Add(-30);
for (int i = 0; i < 5; i++)
{
data.Add(r.NextDouble());
}
/*
* Set your data
*/
bunifuLineChart.Data = data;
/*
* Specify the target canvas
*/
bunifuLineChart.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
*/
bunifuLineChart.BackgroundColor = Color.Purple;
}
VB
Private Sub renderLineChart()
Dim bunifuLineChart As Bunifu.Charts.WinForms.ChartTypes.BunifuLineChart = New Bunifu.Charts.WinForms.ChartTypes.BunifuLineChart()
'
' 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)()
data.Add(-30)
For i As Integer = 0 To 5 - 1
data.Add(r.NextDouble())
Next
'
' Set your data
'
bunifuLineChart.Data = data
'
' Specify the target canvas
'
bunifuLineChart.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
'
bunifuLineChart.BackgroundColor = Color.Purple
End Sub

Working with data

TargetCanvas

Gets and sets the canvas that will render the line components

Data

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

Label

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

Line stylings & Customization

CubicInterpolationMode

Gets and sets the algorithm that draws the curves of a spline line chart. The default algorithm uses a custom weighted cubic interpolation, which renders cool curves, and the monotone algorithm preserves monotonicity (i.e. reserves the order) of the dataset being interpolated/plotted, making it suitable for presenting y=f(x) datasets

LineTension

Gets and sets a double numeric value that changes a curve tension of a spline type of line. A zero value renders a straight line charts. Note that the property doesn’t work when the monotone algorithm is applied in the CubicInterpolationMode property and also when a stepped line chart is rendered

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 line 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.

SteppedLine

Gets and sets the type of line to render on the canvas. Values of a stepped line include;

False: which does not render a step plot. It is the common default value, for rendering a spline chart

Before: which renders plot value before a step. Also the same methodology is applied to the true value

After: which renders a plot value after a step.

Middle: which renders a plot value in the middle of a step

Creating Area Chart

Bunifu line has been crafted to as well create area charts by using the following properties:

Fill property

Gets and sets the type of fill mode for its background. The values include: start, origin and end. A false value will disable the fill mode

BackgroundColor property

Gets and sets the color value for the background fill

Creating Stacked Area chart

Inplementing stacked area charts has been made seamless by using the XAxisStacked property in the canvas and a few other steps. Steps to produce a stacked chart is done in the following way:

Step one: drag and drop two Bunifu line components to your form having Bunifu Canvas control in place

Step two: add data to the two line components as shown below

Step three: in both lines set the property fill value to start and set the target canvas as bunifuCanvas1.

Step four: in the property section of canvas set the XAxesStacked property to have a true value.

Step five: run the application

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