Bunifu Canvas Control

Get chart layouts, look and feel themes, chart animations, and more.

Overview

The canvas is a wrapper component that renders a given set of charts on a set of Cartesian axes. The canvas controls the layout of the chart, the tooltips, and coordinates visual effects such as the animations. If no charts are provided, the canvas will render a set of empty default axes.

Getting Started

Bunifu Canvas is added to the form by dragging it from the toolbox, to your desired location. Once dropped, the canvas will be displayed with a series of X and Y-Axis lines:

Properties

General Properties

The BackColor property - gets and sets a color value property to the canvas’s background color.

The Canvas padding property - gets and sets integral values that create extra space (padding area) within the canvas control.

Legends

Legend properties

The legendFont property - gets and sets the font family, size, and font style of the legend.

The LegendAlignment property - sets and specifies or gets the horizontal alignment of the legend in the canvas area.

The legendForeColor property - gets and sets the foreground color value of the legend’s text.

The LegendFullWidth property - works in a scenario where there are multiple legends. It gets and sets a Boolean value of whether the content area of the legends will occupy a width equal to the explicit width of the canvas.

The LegendPosition property - sets and gets the vertical position of a legend in the canvas area.

The LegendReverse property - gets or sets a Boolean value to the legend arrangement. If set to true the legend that had been positioned as the last element of other prior legends, will be swapped to be the first element in the list of other subsequent legends.

The LegendRTL property - Gets or sets a Boolean value to the legend’s content area. When set to true, the text will be displayed on the right-hand side of the color label.

The Chart Title

Styling the canvas' chart title

The Title property - gets and sets the text to draw at the top of the chart.

The TitleLineHeight property - gets or sets the height between the text and the chart component.

The TitlePosition property - gets or sets the location of the title text in the canvas layout.

The TitlePadding property - gets or sets the integral values that create extra space (padding area) within the title text.

Chart Tooltips

Customizing the canvas tooltip's appearance

The tooltip is displayed when the user hovers over a point on the chart. It shows the point values or any additional information about a series point. Let’s dive into customizing the chart's tooltip properties.

The TooltipFont property - gets and sets the font family, size, and font style of the tooltip text.

The TooltipBackgroundColor property - gets and sets a color value property to the tooltip’s background color.

The ToolTipMode property - gets and sets a distance value between the tooltip and the chart component.

The TooltipsEnabled property - gets and sets a Boolean value to display a tooltip. A false value will hide a tooltip.

Animation

Bunifu canvas provides us 18+ animations based on Robert Penner’s Easing functions(http://robertpenner.com/easing/), which render smooth transitions in the event of property changes in the chart component or the canvas. The canvas will initially display the chart with no data and then have an animation transition it into its final state with all the data. The following is an illustration of the various animation types:

Animation properties

The AnimationDuration property - gets and sets the time span in milliseconds defining how long the animation will take to render data to the final state.

The AnimationType property- gets and sets the type of animation to render on the chart display.

The X-Axis

The x-axis is the horizontal plane of the canvas in a Cartesian coordinate system, which gives a point of reference of data values rendered along the horizontal line.

Let’s dive into getting to know the properties we can customize:

General X-Axis properties

The XAxesFont property - gets and sets the font family, size, and font style of the labels set along the X-axis.

The XAxesDrawTicks property - gets and sets a Boolean value indicating whether the ticks will be visible. The draw tick marks help associate a visual reference between the X-Axis labels and the plot area.

The XAxesForeColor - gets and sets the color value of the labels located alongside the X-Axis horizontal line.

The XAxesStacked property - gets and sets a Boolean value indicating whether the chart components in the canvas layout, will have a vertical piled arrangement. It works in the event where there are multiple datasets of bar charts. When the value is set to true then the bar-charts would be arranged on top of each other. And with the value set to false, the charts would be placed beside each other. Below is a preview of this property:

The vertical X-Axis gridline properties

The XAxesGridLines property - gets and sets a Boolean value indicating whether the vertical gridlines of the X-axis plane will be shown or rendered on the canvas’s fly. If set to false, the gridlines will be hidden.

The XAxesBeginAtZero property - gets and sets a Boolean value indicating whether the X-Axes vertical line will begin at the zero value of the Cartesian plane.

The XAxesGridColor property - gets and sets a color value to the vertical gridlines of the X-Axis plane.

The XAxesLineWidth property - gets and sets an integer value, which changes the width of the vertical gridline in the X-Axis.

The X-Axis Zero-line properties

The XAxesZeroLineColor - gets and sets a color value to the first vertical left gridline on the canvas’s X-Axis region.

The XAxesZeroLineWidth- gets and sets a width integer value to the first Vertical gridline on the canvas’s X-Axis region.

The X-Axes Label/Caption properties

The XAxesLabel property - gets and sets the text to draw in the caption label positioned below the X-Axis region of the chart.

The XAxesLabelFont property - gets and sets the font family, size, and font style of caption label on the X-Axis region.

The XAxesLabelForeColor property - gets and sets a color value to the X-Axis caption label

Y-Axis

The y-axis is the vertical plane of the canvas in a Cartesian coordinate system, which gives a point of reference of data values rendered along the vertical line. Let’s dive into customizing the elements of the y-axis:

General properties

The YAxesBeginAtZero property - gets and sets a Boolean value indicating whether the Y-Axes vertical line will begin at the zero value of the Cartesian plane.

The YAxesDrawTicks property - gets and sets a Boolean value indicating whether the ticks located at the Y-Axis section will be visible. The draw tick marks help associate and provide a visual reference between the Y-Axis labels and the plot area.

The YAxesFont property - gets and sets the font family, size, and font style of the labels set along the Y-axis

The YAxesForeColor property - gets and sets the color value of the labels located alongside the Y-Axis horizontal line

The YAxesStacked property - gets and sets a Boolean value indicating whether the chart components in the canvas layout, will have a horizontal piled arrangement. It works in the event where there are multiple datasets of bar charts. When the value is set to true then the bar-charts would be arranged on top of each other. And with the value set to false, the charts would be placed beside each other. Below is an example of this statement:

The YAxesGridLines property - gets and sets a Boolean value indicating whether the horizontal gridlines of the Y-axis plane will be shown or rendered on the canvas’s fly. If set to false, the gridlines will be hidden.

The YAxesGridColor property - gets and sets a color value to the horizontal gridlines of the Y-Axis plane YAxes Label/Caption.

The Y-Axis Label/Caption properties

The YAxesLabel property - gets and sets the text to draw in the caption label positioned beside the Y-Axis region of the chart

The YAxesLabelFont property - gets and sets the font family, size, and font style of the caption label on the Y-Axis region

The YAxesLabelForeColor property - gets and sets a color value to the Y-Axis’s caption label.

The YAxesLineWidth property - gets and sets an integer, which changes the width of the horizontal gridline in the Y-Axis.

The Y-Axis Zero Line properties

The YAxesZeroLineColor property - gets and sets a color value to the first horizontal bottom gridline on the canvas’s Y-Axis region.

The YAxesZeroLineWidth- gets and sets an integer value, which changes the width of the first horizontal bottom gridline on the canvas’s Y-Axis region

TakeAway

Bunifu Canvas control tends to give you priceless options for creating the most beautiful version of your chart layout. As a UI/UX developer, when assigning and utilizing the various methods and properties of the canvas, it’s your responsibility to use your best judgment and creativity that can lead to great readability of your chart.