Canvas refers to the area in which the chart is plotted.
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' ...>
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' ...>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'>
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' |
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.
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.