Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Chart limits are the minimum and maximum y-axis values. While FusionCharts Suite XT can automatically calculate the best chart limits, it also allows you to specify them explicitly.

The axis limits encompass all values present in the chart; no data value in the chart can be less than the minimum y-axis value or greater than the maximum y-axis value. If an axis limit outside of this range is specified, FusionCharts Suite XT will automatically adjust it.

This section will guide you on how you can configure the chart limits for single and dual y-axis charts. This section talks about:

Setting chart limits explicitly

A column 2D chart with the chart limits explicitly set to 2,500,000 looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "theme": "fint", "yAxisMaxValue": "2500000", "yAxisMinValue": "1000000" }, "data": [ { "label": "Q1", "value": "1950000" }, { "label": "Q2", "value": "1450000" }, { "label": "Q3", "value": "1730000" }, { "label": "Q4", "value": "2120000" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "yAxisMaxValue": "2500000",
        "yAxisMinValue": "1000000"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}
<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',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            //Manually setting y-axis upper and lower limit
            "yAxisMaxValue": "2500000",
            "yAxisMinValue": "1000000"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attributes used to define the chart limits:

Attribute Description

yAxisMinValue and yAxisMaxValue

They specify the values to be set as lower and upper chart limits, respectively, on the y-axis.

Setting y-axis minimum value based on data values

You can decide whether to set the y-axis lower limit to 0 (zero) or should the y-axis lower limit adapt itself to a different figure based on the values provided to the chart.

A column 2D chart with adaptive minimum value for the y-axis set looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "theme": "fint", "setAdaptiveYMin": "1" }, "data": [ { "label": "Q1", "value": "1950000" }, { "label": "Q2", "value": "1750000" }, { "label": "Q3", "value": "1930000" }, { "label": "Q4", "value": "2120000" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "setAdaptiveYMin": "1"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1750000"
        },
        {
            "label": "Q3",
            "value": "1930000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}
<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',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            //Setting adaptive y-axis min
            "setAdaptiveYMin": "1"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1750000"
        }, {
            "label": "Q3",
            "value": "1930000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    }
}
);
    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 an adaptive minimum value for the y-axis:

Attribute Description

setAdaptiveYMin

If set to 1, the minimum value of the y-axis adapts itself based on the minimum data value in the chart. If set to 0 (default), the y-axis minimum value is set to 0.

Setting axis limits for charts with dual y-axis

A combination chart with chart limits explicitly defined for the primary and secondary y-axis looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Revenue Vs Profit Vs Employees", "subCaption": "Last year", "xAxisname": "Month", "pYAxisName": "Amount (In USD)", "sYAxisName": "No. of Employees", "numberPrefix": "$", "pYAxisMinValue": "1000", "pYAxisMaxValue": "25000", "sYAxisMinValue": "1400", "sYAxisMaxValue": "1700", "theme": "fint", "showValues": "0" }, "categories": [ { "category": [ { "label": "Jan" }, { "label": "Feb" }, { "label": "Mar" }, { "label": "Apr" }, { "label": "May" }, { "label": "Jun" }, { "label": "Jul" }, { "label": "Aug" }, { "label": "Sep" }, { "label": "Oct" }, { "label": "Nov" }, { "label": "Dec" } ] } ], "dataset": [ { "seriesName": "Revenue", "showValues": "1", "data": [ { "value": "16000" }, { "value": "20000" }, { "value": "18000" }, { "value": "19000" }, { "value": "15000" }, { "value": "21000" }, { "value": "16000" }, { "value": "20000" }, { "value": "17000" }, { "value": "22000" }, { "value": "19000" }, { "value": "23000" } ] }, { "seriesName": "Profit", "renderAs": "area", "data": [ { "value": "4000" }, { "value": "5000" }, { "value": "3000" }, { "value": "4000" }, { "value": "1000" }, { "value": "7000" }, { "value": "1000" }, { "value": "4000" }, { "value": "1000" }, { "value": "8000" }, { "value": "2000" }, { "value": "7000" } ] }, { "seriesName": "Employees", "parentYAxis": "S", "renderAs": "line", "data": [ { "value": "1422" }, { "value": "1450" }, { "value": "1455" }, { "value": "1450" }, { "value": "1509" }, { "value": "1501" }, { "value": "1505" }, { "value": "1550" }, { "value": "1572" }, { "value": "1575" }, { "value": "1580" }, { "value": "1595" } ] } ] }
{
    "chart": {
        "caption": "Revenue Vs Profit Vs Employees",
        "subCaption": "Last year",
        "xAxisname": "Month",
        "pYAxisName": "Amount (In USD)",
        "sYAxisName": "No. of Employees",
        "numberPrefix": "$",
        "pYAxisMinValue": "1000",
        "pYAxisMaxValue": "25000",
        "sYAxisMinValue": "1400",
        "sYAxisMaxValue": "1700",
        "theme": "fint",
        "showValues": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan"
                },
                {
                    "label": "Feb"
                },
                {
                    "label": "Mar"
                },
                {
                    "label": "Apr"
                },
                {
                    "label": "May"
                },
                {
                    "label": "Jun"
                },
                {
                    "label": "Jul"
                },
                {
                    "label": "Aug"
                },
                {
                    "label": "Sep"
                },
                {
                    "label": "Oct"
                },
                {
                    "label": "Nov"
                },
                {
                    "label": "Dec"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesName": "Revenue",
            "showValues": "1",
            "data": [
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "18000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "21000"
                },
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "17000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "23000"
                }
            ]
        },
        {
            "seriesName": "Profit",
            "renderAs": "area",
            "data": [
                {
                    "value": "4000"
                },
                {
                    "value": "5000"
                },
                {
                    "value": "3000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "2000"
                },
                {
                    "value": "7000"
                }
            ]
        },
        {
            "seriesName": "Employees",
            "parentYAxis": "S",
            "renderAs": "line",
            "data": [
                {
                    "value": "1422"
                },
                {
                    "value": "1450"
                },
                {
                    "value": "1455"
                },
                {
                    "value": "1450"
                },
                {
                    "value": "1509"
                },
                {
                    "value": "1501"
                },
                {
                    "value": "1505"
                },
                {
                    "value": "1550"
                },
                {
                    "value": "1572"
                },
                {
                    "value": "1575"
                },
                {
                    "value": "1580"
                },
                {
                    "value": "1595"
                }
            ]
        }
    ]
}
<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: 'mscombidy2d',
    renderAt: 'chart-container',
    width: '550',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Revenue Vs Profit Vs Employees",
            "subCaption": "Last year",
            "xAxisname": "Month",
            "pYAxisName": "Amount (In USD)",
            "sYAxisName": "No. of Employees",
            "numberPrefix": "$",
            //Manually over-riding the y-axis limits
            "pYAxisMinValue": "1000",
            "pYAxisMaxValue": "25000",
            "sYAxisMinValue": "1400",
            "sYAxisMaxValue": "1700",
            "theme": "fint",
            "showValues": "0"
        },
        "categories": [{
            "category": [{
                "label": "Jan"
            }, {
                "label": "Feb"
            }, {
                "label": "Mar"
            }, {
                "label": "Apr"
            }, {
                "label": "May"
            }, {
                "label": "Jun"
            }, {
                "label": "Jul"
            }, {
                "label": "Aug"
            }, {
                "label": "Sep"
            }, {
                "label": "Oct"
            }, {
                "label": "Nov"
            }, {
                "label": "Dec"
            }]
        }],
        "dataset": [{
            "seriesName": "Revenue",
            "showValues": "1",
            "data": [{
                "value": "16000"
            }, {
                "value": "20000"
            }, {
                "value": "18000"
            }, {
                "value": "19000"
            }, {
                "value": "15000"
            }, {
                "value": "21000"
            }, {
                "value": "16000"
            }, {
                "value": "20000"
            }, {
                "value": "17000"
            }, {
                "value": "22000"
            }, {
                "value": "19000"
            }, {
                "value": "23000"
            }]
        }, {
            "seriesName": "Profit",
            "renderAs": "area",
            "data": [{
                "value": "4000"
            }, {
                "value": "5000"
            }, {
                "value": "3000"
            }, {
                "value": "4000"
            }, {
                "value": "1000"
            }, {
                "value": "7000"
            }, {
                "value": "1000"
            }, {
                "value": "4000"
            }, {
                "value": "1000"
            }, {
                "value": "8000"
            }, {
                "value": "2000"
            }, {
                "value": "7000"
            }]
        }, {
            "seriesName": "Employees",
            "parentYAxis": "S",
            "renderAs": "line",
            "data": [{
                "value": "1422"
            }, {
                "value": "1450"
            }, {
                "value": "1455"
            }, {
                "value": "1450"
            }, {
                "value": "1509"
            }, {
                "value": "1501"
            }, {
                "value": "1505"
            }, {
                "value": "1550"
            }, {
                "value": "1572"
            }, {
                "value": "1575"
            }, {
                "value": "1580"
            }, {
                "value": "1595"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attributes used to explicitly set chart limits for the primary and secondary y-axis:

Attribute Description

pYAxisMinValue and pYAxisMaxValue

They specify the values to be rendered as lower and upper limits, respectively, for the primary y-axis.

sYAxisMinValue and sYAxisMaxValue

They specify the values to be rendered as lower and upper limits, respectively, for the secondary y-axis.

Setting same axis limits for primary and secondary y-axes

You can configure your charts to have the chart limits for the primary and secondary y-axis synced. For charts with static data this can be done by specifying the minimum and maximum y-axis values. This won’t work for dynamic chart data. You can use the sync axis limit feature to ensure that both y-axes have the same limits. A column 2D chart with synced chart limits for the primary and secondary y-axis looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Revenue Vs Profit", "subCaption": "Last year", "xAxisname": "Month", "pYAxisName": "Revenue (In USD)", "sYAxisName": "Profit (In USD)", "numberPrefix": "$", "sNumberPrefix": "$", "showValues": "0", "syncAxisLimits": "1", "theme": "fint" }, "categories": [ { "category": [ { "label": "Jan" }, { "label": "Feb" }, { "label": "Mar" }, { "label": "Apr" }, { "label": "May" }, { "label": "Jun" }, { "label": "Jul" }, { "label": "Aug" }, { "label": "Sep" }, { "label": "Oct" }, { "label": "Nov" }, { "label": "Dec" } ] } ], "dataset": [ { "seriesName": "Revenue", "showValues": "1", "data": [ { "value": "16000" }, { "value": "20000" }, { "value": "18000" }, { "value": "19000" }, { "value": "15000" }, { "value": "21000" }, { "value": "16000" }, { "value": "20000" }, { "value": "17000" }, { "value": "22000" }, { "value": "19000" }, { "value": "23000" } ] }, { "seriesName": "Profit", "parentYAxis": "S", "renderAs": "line", "data": [ { "value": "4000" }, { "value": "5000" }, { "value": "3000" }, { "value": "4000" }, { "value": "1000" }, { "value": "7000" }, { "value": "1000" }, { "value": "4000" }, { "value": "1000" }, { "value": "8000" }, { "value": "2000" }, { "value": "7000" } ] } ] }
{
    "chart": {
        "caption": "Revenue Vs Profit",
        "subCaption": "Last year",
        "xAxisname": "Month",
        "pYAxisName": "Revenue (In USD)",
        "sYAxisName": "Profit (In USD)",
        "numberPrefix": "$",
        "sNumberPrefix": "$",
        "showValues": "0",
        "syncAxisLimits": "1",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan"
                },
                {
                    "label": "Feb"
                },
                {
                    "label": "Mar"
                },
                {
                    "label": "Apr"
                },
                {
                    "label": "May"
                },
                {
                    "label": "Jun"
                },
                {
                    "label": "Jul"
                },
                {
                    "label": "Aug"
                },
                {
                    "label": "Sep"
                },
                {
                    "label": "Oct"
                },
                {
                    "label": "Nov"
                },
                {
                    "label": "Dec"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesName": "Revenue",
            "showValues": "1",
            "data": [
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "18000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "21000"
                },
                {
                    "value": "16000"
                },
                {
                    "value": "20000"
                },
                {
                    "value": "17000"
                },
                {
                    "value": "22000"
                },
                {
                    "value": "19000"
                },
                {
                    "value": "23000"
                }
            ]
        },
        {
            "seriesName": "Profit",
            "parentYAxis": "S",
            "renderAs": "line",
            "data": [
                {
                    "value": "4000"
                },
                {
                    "value": "5000"
                },
                {
                    "value": "3000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "7000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "4000"
                },
                {
                    "value": "1000"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "2000"
                },
                {
                    "value": "7000"
                }
            ]
        }
    ]
}
<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: 'mscombidy2d',
    renderAt: 'chart-container',
    width: '550',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Revenue Vs Profit",
            "subCaption": "Last year",
            "xAxisname": "Month",
            "pYAxisName": "Revenue (In USD)",
            "sYAxisName": "Profit (In USD)",
            "numberPrefix": "$",
            "sNumberPrefix": "$",
            "showValues": "0",
            //Setting both axes to synchronize the limits
            "syncAxisLimits": "1",
            //Theme 
            "theme": "fint"
        },
        "categories": [{
            "category": [{
                "label": "Jan"
            }, {
                "label": "Feb"
            }, {
                "label": "Mar"
            }, {
                "label": "Apr"
            }, {
                "label": "May"
            }, {
                "label": "Jun"
            }, {
                "label": "Jul"
            }, {
                "label": "Aug"
            }, {
                "label": "Sep"
            }, {
                "label": "Oct"
            }, {
                "label": "Nov"
            }, {
                "label": "Dec"
            }]
        }],
        "dataset": [{
            "seriesName": "Revenue",
            "showValues": "1",
            "data": [{
                "value": "16000"
            }, {
                "value": "20000"
            }, {
                "value": "18000"
            }, {
                "value": "19000"
            }, {
                "value": "15000"
            }, {
                "value": "21000"
            }, {
                "value": "16000"
            }, {
                "value": "20000"
            }, {
                "value": "17000"
            }, {
                "value": "22000"
            }, {
                "value": "19000"
            }, {
                "value": "23000"
            }]
        }, {
            "seriesName": "Profit",
            "parentYAxis": "S",
            "renderAs": "line",
            "data": [{
                "value": "4000"
            }, {
                "value": "5000"
            }, {
                "value": "3000"
            }, {
                "value": "4000"
            }, {
                "value": "1000"
            }, {
                "value": "7000"
            }, {
                "value": "1000"
            }, {
                "value": "4000"
            }, {
                "value": "1000"
            }, {
                "value": "8000"
            }, {
                "value": "2000"
            }, {
                "value": "7000"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to sync the chart limits in a dual y-axis chart:

Attribute Description

syncAxisLimits

If set to 1, it will sync chart limits in a dual y-axis chart. By default, the chart limits are not synced.

Showing or hiding y-axis values

A column 2D chart with the y-axis limits showing, but all other y-axis values hidden looks as below:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Quarterly Revenue", "subcaption": "Last year", "xAxisName": "Quarter", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "showLimits": "1", "showYAxisValues": "0" }, "data": [ { "label": "Q1", "value": "1950000" }, { "label": "Q2", "value": "1450000" }, { "label": "Q3", "value": "1730000" }, { "label": "Q4", "value": "2120000" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xAxisName": "Quarter",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "showLimits": "1",
        "showYAxisValues": "0"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1950000"
        },
        {
            "label": "Q2",
            "value": "1450000"
        },
        {
            "label": "Q3",
            "value": "1730000"
        },
        {
            "label": "Q4",
            "value": "2120000"
        }
    ]
}
<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',
    id: 'myChart',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xAxisName": "Quarter",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            //Hiding the upper and lower limits of y-axis in chart
            "showLimits": "1",
            "showYAxisValues": "0"
        },
        "data": [{
            "label": "Q1",
            "value": "1950000"
        }, {
            "label": "Q2",
            "value": "1450000"
        }, {
            "label": "Q3",
            "value": "1730000"
        }, {
            "label": "Q4",
            "value": "2120000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to hide chart limits:

Attribute Description

showLimits

Set it to 0, to hide the chart limits and to 1 (default) to show the chart limits. This overrides the setting of the showYAxisValues attribute.

showYAxisValues

Set it to 0, to hide all values on the y-axis and to 1 (default) to show all values.

Top