FusionCharts使用技巧

How do I customize the chart paddings and margins?

What is Chart Margin in FusionCharts?

By default, FusionCharts provides some padding between the chart border and the canvas. This is called the chart margin and each of the margins - left, right, top, bottom chart can be set individually.

Chart Left Margin

Amount of empty space that you want to put on the left side of your chart is called chart left margin.

Example:

 <chart chartLeftMargin="15"><chart chartLeftMargin="15">

Chart Right Margin

Amount of empty space that you want to put on the right side of your chart.

Example:

<chart chartRightMargin="15"> chartRightMargin="15">

Chart Top Margin

Amount of empty space that you want to put on the top of your chart.

Example:

<chart chartTopMargin="10"> chartTopMargin="10">

Chart Bottom Margin

Amount of empty space that you want to put on the bottom of your chart.

Example:

<chart chartBottomMargin="10"> chartBottomMargin="10">

How can I adjust the space between the chart caption and the top of the canvas in FusionCharts?

You can define the space between the caption of the chart and the top of the chart canvas using captionPadding attribute in the <chart> element. But when you have a sub-caption defined in the chart, it controls the space between the sub-caption and the top of the chart canvas.

Example:

<chart captionPadding="15"> captionPadding="15">

How can I adjust the space between the X-axis title and the data labels in FusionCharts?

You can define the space between the X-axis title and the data labels in FusionCharts using thexAisNamePadding attribute in the <chart> element.

Example:

<chart xAxisNamePadding="10"> xAxisNamePadding="10">

How can I adjust the space between the Y-axis title and the Y-axis values values in FusionCharts?

The padding that you want to set between the y-axis name and Y-axis data values, can be done with the help of yAxisNamePaddingattribute.

Example:

<chart yAxisNamePadding="10"> yAxisNamePadding="10">

How can I adjust the space between the left end of the canvas and y-axis values in FusionCharts?

You can define the space between the left end of the chart canvas and the y-axis values in FusionCharts using the  yAxisValuesPadding attribute in the <chart> element.

Example:

<chart yAxisValuesPadding="5"> yAxisValuesPadding="5">

How can I adjust the space between the canvas bottom edge and the data labels in FusionCharts?

You can set the vertical space between the canvas bottom edge and the data labels with the help oflabelPadding attribute in your <chart> element.

Example:

<chart labelPadding="3" > labelPadding="3" >

How can I adjust the vertical space between the columns/anchors and the data values in FusionCharts?

To control the space between your columns/anchors and the value text boxes you can use the valuePadding attribute.

Example:

<chart valuePadding="3" > valuePadding="3" >

How can I adjust the space between the canvas border and the position where the line/area chart begins in FusionCharts?

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.

Example:

<chart canvasPadding="30" > canvasPadding="30" >