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:

FusionCharts should load here..

Given below are the attributes used to customize chart margins:

Attribute Description
chartLeftMargin It is used to specify the amount of empty space on the left side of the chart.
chartTopMargin It is used to specify the amount of empty space on the top of the chart.
chartRightMargin It is used to specify the amount of empty space on the right side of the chart.
chartBottomMargin 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:

...

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:

FusionCharts should load here..

Given below are the attributes used to set the padding for chart caption, and the axes names and values:

Attribute Description
captionPadding It is used to specify the space (in pixels) between the sub-caption and top of the chart canvas.
xAxisNamePadding 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).
yAxisNamePadding 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).
yAxisValuesPadding 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).
labelPadding 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:

...

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:

FusionCharts should load here..

Given below is the attribute used to set data value padding:

Attribute Description
valuePadding 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:

...

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:

FusionCharts should load here..

Given below is the attribute used to configure canvas padding:

Attribute Description
canvaspadding 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:

...