Bunifu Line Chart
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.
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
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;}
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 - 1data.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.PurpleEnd 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
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
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
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.
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
Bunifu line has been crafted to as well create area charts by using the following properties:
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
Gets and sets the color value for the background fill
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
