Show ticks on x axis in local time with highcharts api - highcharts

Question

I have a line chart with a date/time x axis. The points have a name that is converted to local time. However, the tick marks are placed at UTC midnight. How can I get them to be placed at local midnight?
To clarify, my localtime is EDT (-04:00). So, at approximately 20:00, the tick mark is shown.
var chart = Highcharts.chart('container', {
"chart": {
"type": "line",
"height": 300,
"marginLeft": 60,
"marginRight": 0,
"spacingLeft": 0,
"spacingRight": 0,
"style": {
"fontSize": 14
},
"zoomType": "x"
},
"tooltip": {
"pointFormat": "{point.y}",
"style": {
"fontSize": 14
}
},
"exporting": {
"enabled": false
},
"title": {
"text": "",
"style": {
"display": "none"
}
},
"subtitle": {
"text": "",
"style": {
"display": "none"
}
},
"legend": {
"enabled": "false"
},
"xAxis": {
"type": "datetime",
"labels": {
"enabled": true,
"style": {
"fontSize": "12px"
}
},
"title": {
"text": null
},
"minTickInterval": 86400000
},
"plotOptions": {
"line": {
"color": "#33aaee",
"step": "true",
"lineWidth": 1
}
},
"credits": {
"enabled": false
},
"series": [{
"data": [{
"x": 1499935040582,
"y": 600.8919674194846,
"name": "Jul 13, 2017 4:37 AM"
}, {
"x": 1500069665426,
"y": 600.3026594460489,
"name": "Jul 14, 2017 6:01 PM"
}, {
"x": 1500133689471,
"y": 600.7274040373635,
"name": "Jul 15, 2017 11:48 AM"
}, {
"x": 1500197550895,
"y": 600.1197607401385,
"name": "Jul 16, 2017 5:32 AM"
}, {
"x": 1500224766324,
"y": 600.2311428390589,
"name": "Jul 16, 2017 1:06 PM"
}, {
"x": 1500247544551,
"y": 600.5511455212492,
"name": "Jul 16, 2017 7:25 PM"
}, {
"x": 1500282216949,
"y": 600.2677789206001,
"name": "Jul 17, 2017 5:03 AM"
}, {
"x": 1500285249151,
"y": 600.3165520296044,
"name": "Jul 17, 2017 5:54 AM"
}, {
"x": 1500472917987,
"y": 600.6858600814295,
"name": "Jul 19, 2017 10:01 AM"
}, {
"x": 1500479945476,
"y": 600.6974345877289,
"name": "Jul 19, 2017 11:59 AM"
}],
"showInLegend": false,
"allowPointSelect": true
}]
});
Here is a fiddle showing this.
Highcharts fiddle

Answer 1

Change you epoch's to a javascript date [new Date(epoch)] this will have the date/time fields show in local time instead of UTC.
"series": [{
"data": [{
"x": new Date(1499935040582),
"y": 600.8919674194846
}, {
"x": new Date(1500069665426),
"y": 600.3026594460489
}, {
"x": new Date(1500133689471),
"y": 600.7274040373635
}, {
"x": new Date(1500197550895),
"y": 600.1197607401385
}, {
"x": new Date(1500224766324),
"y": 600.2311428390589
}, {
"x": new Date(1500247544551),
"y": 600.5511455212492
}, {
"x": new Date(1500282216949),
"y": 600.2677789206001
}, {
"x": new Date(1500285249151),
"y": 600.3165520296044
}, {
"x": new Date(1500472917987),
"y": 600.6858600814295
}, {
"x": new Date(1500479945476),
"y": 600.6974345877289
}],
This should keeps your chart in scale with your local time zone

Answer 2

Found an answer to my problem. I am using moment.js to format the time data, so I changed it from:
chart.series[0].data.push({ x: moment(grp.Time).format('x'),
y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) });
to:
chart.series[0].data.push({ x: moment(grp.Time).utc(true).format('x'),
y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) });
So basically I added the ".utc(true)" to the moment definition for the x value.