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