Misalignment at high-end date and time points with xaxis
Here is a scenario for my problem: http://jsfiddle.net/v0bxdqa7/5/
As you can see, the point is not aligned with the xaxis value.
I have come to the conclusion that from the examples shown on the highcharts website, the problem is with my data, but I cannot find the exact problem with it.
Any ideas?
My parameters:
rangeSelector: {
inputEnabled: false,
selected: 1,
buttons: [{
type: 'day',
count: 7,
text: '7'
}, {
type: 'day',
count: 30,
text: '30'
}, {
type: 'year',
count: 1,
text: '365'
}, {
type: 'ytd',
text: 'year'
}]
},
tooltip: {
headerFormat: '<small style="color: #666680">{point.key}</small><br>',
pointFormat: '<span style="color: #acacbf">{series.name}: </span>' +
'<span style="color: #666680"><b>{point.y}</b></span>'
},
xAxis: {
lineColor: '#ebebeb',
type: 'datetime',
labels: {
style: {
color: '#acacbf'
},
align: "center",
maxStaggerLines: 1,
overflow: false
}
},
yAxis: {
allowDecimals: false,
gridLineWidth: 0,
labels: {
enabled: false,
style: {
color: '#acacbf'
}
},
min: 0,
floor: 0,
minRange:1
},
navigator: {enabled: false},
chart: {
className: "line-chart",
backgroundColor: "#f7f7f7",
margin:[10,5,22,5]
},
plotOptions: {
series: {
marker: {
enabled: true,
states: {
hover: {
radius: 5
},
select: {
enabled: true,
radius: 5,
fillColor: '#ffffff',
lineColor: '#ad49a5'
}
}
}
}
},
scrollbar: {
enabled: false
},
colors: ["#ad49a5"]
source to share
Your data is not written correctly (timestamp).
Take the first example: 1370787037000
if you convert it, you get it Sun, 09 Jun 2013 14:10:37 GMT
, and it is exactly as shown in the diagram.
If you want this point to be exactly on Sun, 09 Jun 2013 00:00:00 GMT
, the correct timestamp is 1370736000000
. You must do this for every date.
source to share