When I try to add a point with animations in High Charts, it results in this weird behavior:
Highcharts.chart('container', {
chart: {
events: {
load: function () {
var animate = {duration: 5000};
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true, animate);
}, 5000);
}
}
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'Random data',
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
This is the behavior I would like to achieve but instead of taking 1 second to render, I would like each point to take 5 seconds to render. How can I achieve this?
Something happens that makes the animation take a little bit longer to finish its duration. So the chart will be redrawn to a different shape everytime you put extremely close or equal values for the setInterval and for the duration.
As a workaround, try adding a slightly higher interval of addition to the points enough to become unnoticed the difference. I.e: 100 MS more or 5100