Highstock Highcharts dates don't lineup

Question

I have a Highstock chart with Navigator which is synced to 4 Highcharts on same page. The Highstock dates don't line up with Highcharts dates plus it's a different format.

Highstock and Highchart:: xaxis:

xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
        year: '%Y'
    },
    events: {}
},

Here's the site I'm working on, the file is to large for here. Click on any icon, then pick "Data and Charts". The top chart has a different date format and the bottom charts points don't line up with top chart. I'm sure its default behavior of both Highstock and Highcharts but I can't find a way around problem. Any help would be greatly appreciated,

Michael

you are setting extreme for other 4 charts but not for first chart. try that — Nishith Kant Chaturvedi
setting extreme for chart1 didn't work. chart1 didn't appear. I set utc to false but got same results. Is there a way for the top chart which is a Highstock chart to have the same date format as the 4 below it? — geomajor56

Halvor Holsten Strand Halvor Holsten Strand · Accepted Answer · 2015-09-24T18:07:57

Your first chart, being a Highstock chart, has an ordinal x-axis (API). The other charts do not, as it is not part of Highcharts. You can solve this by setting it to false for the first chart:

$('#container1').highcharts('StockChart', {
    xAxis: {
        ordinal: false,
        // ...
    }
    // ...
});

This also seems to fix your date formatting problem (I'm not sure why).

Highstock Highcharts dates don't lineup

1 Answers