Question

I am using Highcharts to create a bar chart, and trying to figure out how to animate the changes that I am making to the chart. I have set animated to true, but its not showing any changes, just redrawing the bar to the new height.

How can I have it animate changes? Right now I am setting the data with series.setData(), not sure if there is a way to set a specific bar, maybe this is why it does not animate?

http://jsfiddle.net/nycynik/FACtf/

var series = this.series[0];

chartData1[Math.floor(Math.random()*10)] = Math.random()*125;
series.setData(chartData1, true);

Answer 1

Series.setData() doesn’t animate because all the points are thrown away and replaced with new ones.

What you are looking for is Point.update(). When you run point update you are only updating the value, so the point is able to animate from the old value to the new one.

chart.series[0].data[0].update(Math.random());

See demo.