CODEWITHSUNDEEP
javascriptjsonhighcharts
Noobster
Noobster

Reputation: 1044

Cannot set min/max on highcharts with yearly series

I thought I was getting better at highcharts but have now stumbled on an annoying issue, where I cannot seem to be able to set the xAxis min and max values where the xAxis is composed of years. I cannot find a similar issue online.

What happens is the chart xAxis plots the years as expected ... but the series simply vanish and there is no yAxis on the chart.

This is how I have set up my xAxis options ... Has anybody got any idea as to why this is going on? Thank you all for your time.

xAxis: {
        min: 2010,
        max: 2030,
        categories: [1980,  1981,   1982,   1983,   1984,   1985,   1986,   1987,   1988,   1989,   1990,   1991,   1992,   1993,   1994,   1995,   1996,   1997,   1998,   1999,   2000,   2001,   2002,   2003,   2004,   2005,   2006,   2007,   2008,   2009,   2010,   2011,   2012,   2013,   2014,   2015,   2016,   2017,   2018,   2019,   2020,   2021,   2022,   2023,   2024,   2025,   2026,   2027,   2028,   2029,   2030,   2031,   2032,   2033,   2034,   2035,   2036,   2037,   2038,   2039,   2040]
        },
        series: [ (I have removed them from the example) ]
    };

Upvotes: 1

Views: 133

Answers (1)

R3tep
R3tep

Reputation: 12854

In your case, the options min & max use the index and not the key of your array. Replace 2010 by 30 and 2030 by 50, this should be working!

Or use the function indexOf :

var yourArray = [1980,  1981,   1982,   1983,   1984,   1985,   1986,   1987,   1988,   1989,   1990,   1991,   1992,   1993,   1994,   1995,   1996,   1997,   1998,   1999,   2000,   2001,   2002,   2003,   2004,   2005,   2006,   2007,   2008,   2009,   2010,   2011,   2012,   2013,   2014,   2015,   2016,   2017,   2018,   2019,   2020,   2021,   2022,   2023,   2024,   2025,   2026,   2027,   2028,   2029,   2030,   2031,   2032,   2033,   2034,   2035,   2036,   2037,   2038,   2039,   2040]

.
. //Define your highcharts options
.

    xAxis: {
        min: yourArray.indexOf(2010),
        max: yourArray.indexOf(2030),
        categories: yourArray
    },
    series: [ (I have removed them from the example) ]
};

Upvotes: 2

Related Questions