Canvas

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:

FusionCharts should load here..

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:

FusionCharts should load here..

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:

FusionCharts should load here..

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:

FusionCharts should load here..

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:

FusionCharts should load here..

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:

...