Chart Limits
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"
}
]
}<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 |
|---|---|
|
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"
}
]
}<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 |
|---|---|
|
If set to |
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"
}
]
}
]
}<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 |
|---|---|
|
They specify the values to be rendered as lower and upper limits, respectively, for the primary y-axis. |
|
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"
}
]
}
]
}<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 |
|---|---|
|
If set to |
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"
}
]
}<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 |
|---|---|
|
Set it to |
|
Set it to |