# Bunifu Canvas Control ## 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: ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MNAMoTsBbcMnEm38mqp%2F-MNANds-lDv4uZpIP5uD%2Ft7.gif?alt=media\&token=36b692f0-b802-47b9-86a8-4918e4fab52c) ## 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(), 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: ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MNBKQ1XSNqyfvkM8V4t%2F-MNBVPS3Y76XO9wr-dzM%2Ft10.gif?alt=media\&token=609e0009-12e3-43ea-8727-f8894f3b0b22) #### 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.