Accepted answer

Update the name, then set the data with the desired animation:

chart.series[0].update({name:'new title'});

See working fiddle.


I found a better solution

chart.update({ series: newSeries }, true, true, true);

The third argument is the key:

update(options [, redraw] [, oneToOne] [, animation])


Since the correct answer did not work for me with multiple series, I had to do it more similar to this:

First update the names since it's a quicker operation without animation.

// Pass false to skip redraw (since there are multiple operations, for better performance)
chart.series[0].update({name:'new title 0'}, false);
chart.series[1].update({name:'new title 1'}, false);
chart.series[2].update({name:'new title 2'}, false);
chart.series[3].update({name:'new title 3'}, false);

// Redraw the name changes before updating the data.

// Update the series data with animation, passing false to redraw here as well.
chart.series[0].setData(newData, false);
chart.series[1].setData(newData1, false);
chart.series[2].setData(newData2, false);
chart.series[3].setData(newData3, false);

// Now we redraw the series data

Related Query

More Query from same tag