Highcharts - data day sum one day ahead - highcharts

Question

Good evening (CET),
I collect data, calculate a day sum, store the value in mySQL with a time stamp close to 24h of that day (like August 4, 23:59:30).
In a Highchart Column graph, the value will be shown on the August 5th. (You will see this be hovering over the bar, that the value doesn't fit to the xAxis.)
A working example is at http://jsfiddle.net/bg8yu3ft/
// data
var data = [ [1501624793000, 3389], [1501883993000, 4045], [1501970397000, 6572], [1502056798000, 5836], [1502143193000, 4736], [1502229588000, 6629], [1502315996000, 3981], [1502402391000, 4424] ]
// create the chart
Highcharts.stockChart('container', {
series: [{
type: 'column',
data: data,
}]
});
Looking forward to any advice to center the bar on the day it belongs to.

Answer 1

Assuming all your data is going to be in the same format (i.e. close to midnight) you can do it easily with pointplacement like this: fiddle. Depending on your timezone you might have to adjust the value a little.
Highcharts.stockChart('container', {
series: [{
type: 'column',
data: data,
pointPlacement: -1.2
}]
});
Another option would be to move the ticks, API.

Answer 2

You could change your x data to the closes full day then in the chart all will work fine and axis, point, tooltip will show x values as full days.
If you need to have precise day in the tooltip, then you could show it as an info. Demo: http://jsfiddle.net/BlackLabel/7uhdfcj4/
// data
var data = [
[1501624793000, 3389],
[1501883993000, 4045],
[1501970397000, 6572],
[1502056798000, 5836],
[1502143193000, 4736],
[1502229588000, 6629],
[1502315996000, 3981],
[1502402391000, 4424],
];
Highcharts.each(data, function(d, i) {
var realTime = d[0],
date = Highcharts.dateFormat('%Y:%m:%d:%H:%M:%S:%L', realTime).split(':'),
day = (+date[2]) + ((+date[3]) > 19 ? 1 : 0);
data[i].push(realTime);
data[i][0] = Date.UTC(+date[0], +date[1], day);
});
// create the chart
Highcharts.stockChart('container', {
series: [{
type: 'column',
data: data,
keys: ['x', 'y', 'realTime'],
tooltip: {
pointFormat: '{point.realTime: %Y.%m.%d %H:%M:%S}'
}
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>