Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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 will 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:

{ "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" } ] }
{
    "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:

FusionCharts will 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:

{ "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" } ] }
{
    "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:

FusionCharts will 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:

{ "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" } ] }
{
    "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:

FusionCharts will 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:

{ "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" } ] }
{
    "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"
        }
    ]
}
Top