I can update the data value of a spider chart and see it animated using this method:

chart.series[i].setData(newSeries[i].data);

But, as the series in a spider chart consists not only of data but also other fields, as in

series: [{
            name: 'Allocated Budget',
            data: [43000, 19000, 60000, 35000, 17000, 10000],
            pointPlacement: 'on'
        }, {
            name: 'Actual Spending',
            data: [50000, 39000, 42000, 31000, 26000, 14000],
            pointPlacement: 'on'
        }]

Along with the data, when I need to change the value name: 'Actual Spending' , how can I update the series with animation?

Because, for example if I call:

chart.series[i].update({series: newSeries[i] , name : newName}); 

There won't be any animation.

If it is still unclear... Well, sometimes a jsfiddle is worth a 100 words.

I can update the data value of a spider chart and see it animated using this method:

chart.series[i].setData(newSeries[i].data);

But, as the series in a spider chart consists not only of data but also other fields, as in

series: [{
            name: 'Allocated Budget',
            data: [43000, 19000, 60000, 35000, 17000, 10000],
            pointPlacement: 'on'
        }, {
            name: 'Actual Spending',
            data: [50000, 39000, 42000, 31000, 26000, 14000],
            pointPlacement: 'on'
        }]

Along with the data, when I need to change the value name: 'Actual Spending' , how can I update the series with animation?

Because, for example if I call:

chart.series[i].update({series: newSeries[i] , name : newName}); 

There won't be any animation.

If it is still unclear... Well, sometimes a jsfiddle is worth a 100 words.

• javascript
• animation
• charts
• highcharts

• Hey @Josh . set data redraws by default. api.highcharts.com/highstock#Series.setData – Orkun Commented Apr 10, 2015 at 9:10
• i can set the data, no problem with that. But how do i change the other fields? 'setName' per se ? – Orkun Commented Apr 10, 2015 at 9:13
• I'm not sure what kind of animation do you expect when updating series name? See demo: jsfiddle.net/j522sdbk – Paweł Fus Commented Apr 10, 2015 at 9:45
• @PawełFus as in : jsfiddle.net/skeletorkun/my8646oc – Orkun Commented Apr 10, 2015 at 12:53
• @PawełFus ah now I understood what you mean.. no animation expectations from the 'name' value change of course. I just want to be able to update both data and name with an animation on the data change – Orkun Commented Apr 10, 2015 at 13:15

3 Answers 3

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

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

See working fiddle.

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.
chart.redraw();

// 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
chart.redraw();

I found a better solution

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

The third argument is the key:

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