Loading
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
-
Setting y-axis minimum value based on data values
-
Setting axis limits for charts with dual y-axis
-
Setting same axis limits for primary and secondary y-axes
-
Showing or hiding y-axis values
Setting chart limits explicitly
A column 2D chart with the chart limits explicitly set to 2,500,000 looks as below:
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. |
The data structure used, in the chart above, to configure chart limits is as follows:
{
"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"
}
]
}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:
Given below is the attribute used to set an adaptive minimum value for the y-axis:
| Attribute | Description |
|---|---|
|
If set to |
The data structure needed to set adaptive minimum value for the y-axis is given below:
{
"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"
}
]
}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:
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. |
The data structure used, in the chart above, to define chart limits for the primary and secondary y-axis is given below:
{
"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"
}
]
}
]
}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:
Given below is the attribute used to sync the chart limits in a dual y-axis chart:
| Attribute | Description |
|---|---|
|
If set to |
The data structure needed to sync chart limits in a dual y-axis chart is given below:
{
"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"
}
]
}
]
}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:
Given below is the attribute used to hide chart limits:
| Attribute | Description |
|---|---|
|
Set it to |
|
Set it to |
The data structure needed to hide chart limits is given below:
{
"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"
}
]
}