Loading

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:

FusionCharts will load here..

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.

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

FusionCharts will load here..

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.

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

FusionCharts will load here..

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.

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

FusionCharts will load here..

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.

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

FusionCharts will load here..

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.

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