I write a new "pointFormatter" function to show the gap between 2 points, such as jsfiddle, but when I move the mouse to the first point "7.Jan", the tooltip doesn't show correctly, and I saw errorlog in console as "TypeError: this.series.data[preIndex] is undefined"
But, when I change the timeRange to "all", then the moving mouse to the first point doesn't cause any error any more, and when I change the timeRange back to "1w", it is OK also.
What is more, if I change the point num from 10 to 9 by deleting the last point, then the error doesn't occur any more.
Why? which thing caused this error?
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{type: 'week',count: 1,text: '1w'},
{type: 'all',text: 'all'}
],
selected: 0
},
series: [{
name: 'USD',
data: [
[0,null],
[86400000,null],
[86400000*2,null],
[86400000*3,null],
[86400000*4,null],
[86400000*5,null],
[86400000*6,3],
[86400000*7,4],
[86400000*8,6],
[86400000*9,8],
]
}],
plotOptions: {
line: {
step: 'left',
connectNulls: true,
tooltip: {
pointFormatter: function () {
var preIndex = this.index - 1;
while (preIndex >= 0 && this.series.data[preIndex].y == null) {
preIndex--;
}
if (preIndex < 0) {
return '<span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': <b>' + this.y + '</b><br/>';
} else {
var prePoint = this.series.data[preIndex];
var prePointY = prePoint.y;
var prePointX = prePoint.x;
var day = (this.x - prePointX) / 86400 / 1000;
var add = this.y - prePointY
add_str = '(' + add + ')';
return '<span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': <b>' + this.y + '</b> ' + add_str + '<br/>';
}
}
}
}
},
});
});
Highstock has data grouping feature - more information here.
This feature can change the series.data array. Instead you can use series.options.data (original data from the options) or disable dataGrouping.
plotOptions: {
line: {
dataGrouping: {enabled: false},
example: http://jsfiddle.net/6mpt8xv2/