Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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:

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..
{ "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Monthly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Month",
            "yAxisName": "Amount (In USD)",
            //Modifying chart left margin
            "chartLeftMargin": "40",
            //Modifying chart top margin
            "chartTopMargin": "40",
            //Modifying chart right margin
            "chartRightMargin": "40",
            //Modifying chart bottom margin
            "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"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Monthly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Month",
            "yAxisName": "Amount (In USD)",
            "yAxisMaxValue": "1200000",
            "numberPrefix": "$",
            //Changing x-axis name padding
            "xAxisNamePadding": "30",
            //Changing y-axis name padding
            "yAxisNamePadding": "30",
            //Changing x-axis value padding
            "labelPadding": "15",
            //Changing y-axis value padding
            "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"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Monthly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Month",
            "yAxisName": "Amount (In USD)",
            "yAxisMaxValue": "1200000",
            "rotateValues": "0",
            "placeValuesInside": "0",
            "numberPrefix": "$",
            "valueFontColor": "#333333",
            //Adding value padding for data values (vertical space between columns and data values)
            "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"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'area2d',
    id: "myChart",
    renderAt: 'chart-container',
    width: '500',
    height: '250',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subCaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            //Canvas padding
            "canvasPadding": "30",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "First Quarter",
            "value": "420000"
        }, {
            "label": "Second Quarter",
            "value": "810000"
        }, {
            "label": "Third Quarter",
            "value": "720000"
        }, {
            "label": "Fourth Quarter",
            "value": "550000"
        }]
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            var radElem,
                radio = document.getElementsByTagName('input'),
                flag = 1;
            for (i = 0; i < radio.length; i++) {
                radElem = radio[i];
                if (radElem.type === 'radio') {
                    radElem.onclick = function() {
                        val = this.getAttribute('value');
                        if (val === "withCP" && flag !== 1) {
                            evtObj.sender.setChartAttribute("canvasPadding", "30");
                            flag = 1;
                        } else if (val === "withoutCP" && flag !== 0) {
                            evtObj.sender.setChartAttribute("canvasPadding", "0");
                            flag = 0;
                        }
                    };
                }
            }
        },
        'beforeRender': function(event, args) {
            var radioContainer = document.createElement('div');

            radioContainer.innerHTML = '<div id="radio-container"><label><input type="radio" id="withCP" name="padding" value="withCP" CHECKED > With Padding</label><label><input type="radio" id="withoutCP" name="padding" value="withoutCP"> Without Padding</label></div>';
            args.container.appendChild(radioContainer);
            args.container.setAttribute('style', 'padding:10px;font-family: Helvetica Neue, Arial; font-size: 14px; font-weight: normal;');
            radioContainer.setAttribute('style', 'margin-top: 10px; width: 500px; text-align:  center;');
        }

    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Top