Loading
Chart Paddings and Margins
FusionCharts Suite XT lets you manage the space around the canvas and within the chart by configuring chart paddings and margins.
This article shows you how to:
-
Modify chart margins
-
Change padding for chart caption, axis name and axis value
-
Change data label and data value padding
-
Changing canvas padding in a chart
Modifying chart margins
A chart margin is the space between the chart border and the canvas border. It can also be called chart padding. You can set the chart margins on any of the 4 sides of a chart. Below is a chart with equal margins on all four sides:
Given below are the attributes used to customize chart margins:
| Attribute | Description |
|---|---|
|
It is used to specify the amount of empty space on the left side of the chart. |
|
It is used to specify the amount of empty space on the top of the chart. |
|
It is used to specify the amount of empty space on the right side of the chart. |
|
It is used to specify the amount of empty space on the bottom of the chart. |
The data structure used, in the chart above, to customize the chart margins is as follows:
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"chartLeftMargin": "40",
"chartTopMargin": "40",
"chartRightMargin": "40",
"chartBottomMargin": "40",
"numberPrefix": "$",
"showBorder": "1"
},
"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"
}
]
}Changing padding for caption, axes names and axis values
By setting the axis name padding and axis value padding, you can control the amount of space between the axes and the canvas. A chart with the axis names and axis values with defined padding is shown below:
Given below are the attributes used to set the padding for chart caption, and the axes names and values:
| Attribute | Description |
|---|---|
|
It is used to specify the space (in pixels) between the sub-caption and top of the chart canvas. |
|
It is used to specify the distance between the top end of x-axis title and the bottom end of data labels (or canvas, if data labels are not to be shown). |
|
It is used to specify the distance between the right end of y-axis title and the start of y-axis values (or canvas, if the y-axis values are not to be shown). |
|
It is used to specify the horizontal space between the canvas left edge and the y-axis values or trend line values (on left/right side). |
|
It is used to specify the vertical space between the canvas bottom edge and the x-axis values. |
The data structure used, in the chart above, to customize padding for the axes is given below:
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "1200000",
"numberPrefix": "$",
"xAxisNamePadding": "30",
"yAxisNamePadding": "30",
"labelPadding": "15",
"yAxisValuesPadding": "10"
},
"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"
}
]
}Changing data label and data value padding
A column 2D chart with a padding introduced between the data values and the columns looks as below:
Given below is the attribute used to set data value padding:
| Attribute | Description |
|---|---|
|
It is used to specify in pixels the vertical space between the end of columns and data values. Note that this can take negative values as well. |
The data structure needed to customize data label and data value padding is given below:
{
"chart": {
"theme": "fint",
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "1200000",
"rotateValues": "0",
"placeValuesInside": "0",
"numberPrefix": "$",
"valueFontColor": "#333333",
"ValuePadding": "5"
},
"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"
}
]
}Changing canvas padding in a chart
For a line/area chart, the padding between the canvas border and the position where the line/area chart begins to draw is called canvas padding. A chart with chart padding introduced looks as below:
Given below is the attribute used to configure canvas padding:
| Attribute | Description |
|---|---|
|
Used to specify the space between the canvas border and first and last data points in your chart. |
The data structure used, in the chart above, to customize canvas padding is given below:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"canvasPadding": "30",
"theme": "fint"
},
"data": [
{
"label": "First Quarter",
"value": "420000"
},
{
"label": "Second Quarter",
"value": "810000"
},
{
"label": "Third Quarter",
"value": "720000"
},
{
"label": "Fourth Quarter",
"value": "550000"
}
]
}