Years-only display on xAxis with Highcharts

Question

I have a graph which displays a line over many days, months and years. I'd like to have on the xAxis only every xth year displayed. In Safari, it displays it correctly; in Firefox (41.0), it displays 1970 all the way through. Here is a fiddle.

The data look like this:

    Date,Value
    1-Jan-1993,
    2-Jan-1993,
    3-Jan-1993,
    4-Jan-1993,
    5-Jan-1993,-4.30161566849

The xAxis definition like this:

    xAxis: 
    {
        tickWidth: 0,
        type: 'datetime',
        labels: 
        {
           format: '{value:%Y}'
        }
    }

Here is a screenshot of what Firefox spits out:

Thanks for any suggestions!

It's probably problem with parsing your dates into timestamps - could you show code responsible for that part? Very unlikely it's a problem with Highcharts config. — Paweł Fus
I feel its not problem with highcharts, its something about the date format not supported while parsing in safari. See this stackoverflow.com/questions/4310953/invalid-date-in-safari — Nishith Kant Chaturvedi
So most likely , you have to manipulate your csv to replace "-" with "/" , or read it in a javascript variable and replcace using (new Date('2011-04-12'.replace(/-/g, "/"))) — Nishith Kant Chaturvedi
Thanks a lot! Here is the fiddle which shows the data and the conversion. I tried to replace the "-" with "/", but that doesn't work either. — luftikus143
Still struggling with this. Any help would be very much appreciated! — luftikus143

Simon West Simon West · Accepted Answer · 2015-10-29T16:04:41

Firefox cannot parse your date strings in their current format they all return the default datetime of 1 Jan 1970, replacing all the - seperators with spaces allows Firefox, Chrome and IE to parse the dates correctly as seen here http://fiddle.jshell.net/z2uosh1a/

Years-only display on xAxis with Highcharts

1 Answers