Question

I have a Highchart chart to display some data series with animation. The chart have a combination of line and column types. Each data series set can be replaced entirely with another set.

The problem is: at initial load, the animation is smooth and applied to all data series. But when I make a data series replacement and redraw the chart, the animation seems to disappear or not as smooth as the initial load.

I need the animation to behave consistently, same with the initial one.

My data series replacement code is as follows :

var i_limit=chart["series"]["length"];
for(var i=0;i<i_limit;i++)
{
    chart.series[0].remove(true);
}
var i_limit=data1.length;
for(var i=0;i<i_limit;i++)
{
    chart.addSeries(data1[i],true);
    chart["redraw"]()
}

My jsFiddle that show the complete code for this problem : http://jsfiddle.net/dinoJS/axQNU/1/. (Click on the button to trigger data series replacement)

Answer 1

A chart has an animation property. You can adjust the duration of the animation, giving a longer transition which results in a smoother look.

Here is an updated JSFiddle with this property. You can find the documentation for the chart.animation property here.