Loading
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:
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 |
|---|---|
|
Sets canvas background color. Accepts hex code. e.g. |
|
Sets transparency for canvas background. Valid range is |
The data structure required to set the chart canvas fill color is as shown below:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"canvasbgColor": "#1790e1",
"canvasbgAlpha": "10",
"canvasBorderThickness": "1",
"showAlternateHGridColor": "0",
"bgColor": "#eeeeee",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}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 |
|---|---|
|
Set the value to |
|
Specify canvas border color. Accepts hex code. e.g. |
|
Specify canvas border thickness. Valid range is |
|
Sets transparency of canvas border. Valid range is |
The data structure to customize the canvas border using these attributes is as shown below:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"showCanvasBorder": "1",
"canvasBorderColor": "#666666",
"canvasBorderThickness": "4",
"canvasBorderAlpha": "80",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}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 |
|---|---|
|
Sets canvas background color. For gradient effect, enter colors separated by comma. Accepts hex code, e.g. |
|
Sets transparency for canvas background. Valid range is |
|
Specify canvas background ratio for gradients in percentage and separated by comma. The values should add up to |
|
Specify canvas background angle (in degrees) in case of gradient. Valid range is |
The data structure required to customize the canvas border using these attributes is as shown below:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"theme": "fint",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"placevaluesInside": "1",
"rotatevalues": "1",
"bgColor": "#eeeeee,#cccccc",
"canvasbgColor": "#eeeeee,#b3b3b3",
"canvasbgAlpha": "100",
"canvasBgRatio": "40,60",
"canvasBgAngle": "0"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}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 |
|---|---|
|
Helps you specify the color for canvas base. Accepts hex code, e.g |
|
Set it to |
|
Set it to |
|
Height of canvas base (in pixels). |
|
Depth of Canvas Background (in pixels). |
The data required to configure a 3D chart’s canvas is as shown below:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"theme": "fint",
"numberPrefix": "$",
"placevaluesInside": "1",
"rotatevalues": "1",
"showCanvasBg": "1",
"showCanvasBase": "1",
"canvasBaseDepth": "14",
"canvasBgDepth": "5",
"canvasBaseColor": "#aaaaaa",
"canvasBgColor": "#eeeeee"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}