This section shows you how to customize the canvas area of your chart. Chart canvas refers to the area in which the chart data is plotted excluding the area where titles, legends, and axis names are rendered.
The blue coloured area shown in the chart below is the canvas area:
In this section you will learn how to:
Change the canvas fill color
Customize the canvas border
Use gradient fill for the canvas
Configure a 3D canvas
Changing the canvas fill color
A live chart with its canvas fill color modified will look as below:
The attributes used to change canvas fill colour are described below:
| Attribute Name | Description |
|---|---|
canvasBgColor |
Sets canvas background color. Accepts hex code. e.g. #00ffaa. |
canvasBgAlpha |
Sets transparency for canvas background. Valid range is 0 (completely transparent) to 100 (opaque). |
The data structure required to set the chart canvas fill color is as shown below:
Customizing the canvas border
By default, 2D charts are rendered with a border around the canvas. FusionCharts Suite XT allows you to customize the canvas border color, thickness and transparency.
A live chart with a modified canvas border will look as below:
Given below is a brief description of the attributes used to customize the canvas border:
| Attribute Name | Description |
|---|---|
showCanvasBorder |
Set the value to 1 (default) to show the canvas border or set it to 0 to hide it. |
canvasBorderColor |
Specify canvas border color. Accepts hex code. e.g. #00ffaa. |
canvasBorderThickness |
Specify canvas border thickness. Valid range is 0(thin) to 5(thick). |
canvasBorderAlpha |
Sets transparency of canvas border. Valid range is 0 (completely transparent) to 100 (opaque). |
The data structure to customize the canvas border using these attributes is as shown below:
Using gradient fill for the canvas
Below is a sample chart with a gradient filled chart canvas:
The following attributes can be used to customize the chart canvas with a gradient fill:
| Attribute Name | Description |
|---|---|
canvasBgColor |
Sets canvas background color. For gradient effect, enter colors separated by comma. Accepts hex code, e.g. #aabbcc, #112233 |
canvasBgAlpha |
Sets transparency for canvas background. Valid range is 0 (completely transparent) to 100 (opaque). In case multiple comma-separated colors are provided for the attribute canvasBgColor, corresponding opacity for each color can also be specified as comma separated values in this attribute, e.g. 25, 75, 50. |
canvasBgRatio |
Specify canvas background ratio for gradients in percentage and separated by comma. The values should add up to 100. e.g. for a three colour gradient, if you want to allocate 50% to first two and remaining to the last, you would need to specify the value as 25, 25, 50. |
canvasBgAngle |
Specify canvas background angle (in degrees) in case of gradient. Valid range is 0 to 360. |
The data structure required to customize the canvas border using these attributes is as shown below:
Configuring the 3D canvas
The canvas can be configured to have a 3D effect. A column chart with a 3D canvas will look like this:
Given below is a list of attributes that can be used to customize the 3D chart canvas:
| Attribute Name | Description |
|---|---|
canvasBaseColor |
Helps you specify the color for canvas base. Accepts hex code, e.g #00ffaa. |
showCanvasBg |
Set it to 1 (default) to show canvas background or 0 to hide it. |
showCanvasBase |
Set it to 1 (default) to show canvas base or 0 to hide it. |
canvasBaseDepth |
Height of canvas base (in pixels). |
canvasBgDepth |
Depth of Canvas Background (in pixels). |
The data required to configure a 3D chart's canvas is as shown below: