CODEWITHSUNDEEP
highcharts
user1562220
user1562220

Reputation: 11

Highcharts - date on xAxis label difference on tooltip

I have a problem with HighCharts xAxis label. Date on xAxis label difference on tooltip and there are have 2 gridLine on a tick point. I thing have problem with json data but I don't know why.

Here is my code http://jsfiddle.net/jevgzgjx/1/

My data as a json array with timestamp: 

var json = [[[1362783600000,5691],[1362870000000,6503],[1362956400000,15574],[1363042800000,16211],[1363129200000,16427],[1363215600000,16486],[1363302000000,14737],[1363388400000,5838],[1363474800000,5542],[1363561200000,15560],[1363647600000,18940]],[[1362783600000,4346],[1362870000000,4112],[1362956400000,11356],[1363042800000,11876],[1363129200000,11966],[1363215600000,12086],[1363302000000,10916],[1363388400000,4507],[1363474800000,4202],[1363561200000,11523],[1363647600000,14431]]];

Upvotes: 1

Views: 844

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

The problem here is that your timestamps are all for 23:00 (11pm). Therefore the point is being drawn slightly to the left of each grid line (since the gridline is for 00:00 each day). It also causes the tooltip of each point to show the day before, since the point is in fact not on the day that the gridline displays, but one hour prior to that.

You can visualize this problem by modifying dateTimeLabelFormats, so that the hours are shown in the tooltip, like this (see this JSFiddle):

dateTimeLabelFormats: {
    day:"%A, %b %e, %Y, %H:%M"
}

I'm not sure about the origin of your problem, but it can be solved by adding 3600000 (one hour in ms) to all your timestamps. The problem may be timezone related as timestamps in Highcharts are treated as UTC by default, so look into getting your timestamps in UTC as well.

If you use Date objects you can specify the timezone before getting the timestamp. You can disable using UTC by default with global.useUTC: false (API), but then you'll risk ending up with different results depending on where you are viewing the chart.

Upvotes: 4

Related Questions