Bunifu Canvas Control
Get chart layouts, look and feel themes, chart animations, and more.
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.
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:

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

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 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:
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
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
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
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 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:
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-axisThe
YAxesForeColor
property - gets and sets the color value of the labels located alongside the Y-Axis horizontal lineThe
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
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 regionThe
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
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
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.
Last modified 2yr ago