Canvas refers to the area in which the chart is plotted.

 
 
 
Changing Canvas Fill Color
You can fill the canvas with solid or gradient color. The following attributes let you fill a solid color in the canvas:
Attribute Description Example
canvasbgColor

Lets you set the background color for the Canvas. Use hex color code without #. To use a gradient fill, speicfy all the colors of the gradient separated by commas.

canvasbgColor='1D8BD1'
canvasbgAlpha Lets you sets alpha (transparency) for canvas.

canvasbgAlpha='60'

Example: <chart ... canvasBgColor='CCCCCC' canvasBgAlpha='80' ...>
 
Customizing Canvas Border

The 2D Charts have a border around the canvas as shown below:

You can customize the canvas border using the attributes below:
Attribute Description Example
canvasBorderColor Lets you set the color for canvas border. canvasBorderColor='1D8BD1'
canvasBorderThickness Lets you set thickness of canvas border (in pixels) canvasBorderThickness='2'
canvasBorderAlpha Lets you set alpha for canvas border. canvasBorderAlpha='60'
Example: <chart ... canvasBorderColor='666666' canvasBorderThickness='1' canvasBorderAlpha='80' ...>
 
Using gradient fills for canvas
You can also use gradients to fill the canvas. The following attributes let you do so:
Attribute Description Example
canvasBgColor

To fill the canvas as gradient, you need to define two (or more) colors separated by comma. Use hex code of colors without specifying #.

canvasBgColor='1D8BD1,FFFFFF'

canvasBgAlpha

For each color code that you've specifed in canvasbgColor attribute, you need to specify a respective alpha (transparency). Separate the alphas by comma.

canvasBgAlpha='40,100'

canvasBgRatio

Ratio of each color in the gradient on a scale of 100. The total ratios specified as this attribute should sum up to 100. For example, if you want to plot a equi-distant gradient for 2 colors, specify canvasbgRatio as "0,100".

canvasBgRatio='40,60'

canvasBgAngle

Angle of the gradient fill (in degrees - 0-360).

canvasBgAngle='270'

Example: <chart canvasBgColor='FFFFFF,FF5904' canvasBgAlpha='100,40' canvasBgRatio='0,100' canvasBgAngle='180'>
 
Configuration Options for 3D Canvas
For 3D charts (and canvas), you've the following configuration properties:
Attribute Description Example
showCanvasBg

Whether to show canvas background.

showCanvasBg='1'

showCanvasBase

Whether to show canvas base.

showCanvasBase='1'

canvasBaseDepth

Height of canvas base (in pixels)

canvasBaseDepth='10'

canvasBgDepth

Depth of Canvas Background

canvasBgDepth='3'

 
Applying effects to Canvas
Using STYLES, you can apply effects like bevel, shadow, glow & blur to canvas. Shown below is an example where bevel (right side only) and shadow have been applied to canvas:
And the XML for this can be listed as below:

<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
    <set label='Quarter 1' value='420500' />
    <set label='Quarter 2' value='295400' />
    <set label='Quarter 3' value='523400' />
    <set label='Quarter 4' value='465400' />
    <styles>
        <definition>
            <style name='myBevel' type='Bevel' angle='0' />
            <style name='myShadow' type='Shadow' distance='5' angle='45'/>
        </definition>
        <application>
            <apply toObject='Canvas' styles='myBevel,myShadow' />
        </application>
    </styles>

</chart>

You can similarly apply other effects too.
 
Animating the Canvas
Using STYLES, you can also animate the chart canvas. For example, the XML below renders the grow-effect to the 2D canvas. For 3D canvas, you can animate only _alpha property.

<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
    <set label='Quarter 1' value='420500' />
    <set label='Quarter 2' value='295400' />
    <set label='Quarter 3' value='523400' />
    <set label='Quarter 4' value='465400' />
    <styles>
        <definition>
            <style name='myCanvasAnimX' type='Animation' param='_xScale' start='0' duration='1' />
            <style name='myCanvasAnimY' type='Animation' param='_yScale' start='0' duration='1' />
        </definition>
        <application>
            <apply toObject='Canvas' styles='myCanvasAnimX,myCanvasAnimY' />
        </application>
    </styles>

</chart>

In a similar manner, you can apply other animation effects to 2D canvas.