Highcharts - column chart redraw animation

Question

I am trying to update an existing data series with a new data array and call the redraw function upon completion. Although this works just fine, I am not completely satisfied that I would like to have some kind of transition to growth / reduction. I saw an example using Highcharts (spin with an existing dataset, then click the "Install new data in the selected series" button), but I cannot reproduce this behavior.

Here is the code I wrote:

  var series, newSeriesThreshold = this.chart.series.length * 2; for (var i = 0; i < data.length; i += 2) { series = { name: this.data[i].title, data: this.data[i].data, color: this.data[i].color }; if (i >= newSeriesThreshold) { this.chart.addSeries(series, false); } else { var currentSeries = this.chart.series[i / 2]; currentSeries.setData(series.data, false); } } this.chart.redraw(); 

These are the options when creating the chart:

  var config = { chart: { renderTo: $(this.container).attr('id'), type: this.settings.type, animation: { duration: 500, easing: 'swing' } }, title: { text: null }, legend: { enabled: this.settings.legend.show }, tooltip: { formatter: function() { return this.x.toFixed(0) + ": <b>" + this.y.toString().toCurrency(0) + '</b>'; } }, xAxis: { title: { text: this.settings.xaxis.title, style: { color: '#666' } } }, yAxis: { title: { text: this.settings.yaxis.title, style: { color: '#666' } } }, series: series, plotOptions: { column: { color: '#FF7400' } }, credits: { enabled: false } }; 

This gives an immediate update without transition effects. Any ideas what I can do wrong?

Answer 1

This remains a mystery. I managed to update the axis, which assumes that some kind of animation is happening, but it applies only to the axis, not the columns.

In the end, I decided with this behavior.

Answer 2

I solved this problem by destroying and re-creating the chart.

Here is a link to the highcharts forum that helps me: http://forum.highcharts.com/highcharts-usage/animation-on-redraw-t8636/#p93199

The answer comes from the high card support team.

  $(document).ready(function() { var chartOptions = { // Your chart options series: [ {name: 'Serie 1' , color: '#303AFF', data: [1,1,1,1,1,1,1} ] }; var chart = new Highcharts.Chart(chartOptions); $("#my_button").click(function(){ chart.destroy(); chartOptions.series[0].data = [10,5,2,10,5,2,10]; chart = new Highcharts.Chart(chartOptions); }); }); 

Answer 3

This can help:

 var mychart = $("#mychart").highcharts(); var height = mychart.renderTo.clientHeight; var width = mychart.renderTo.clientWidth; mychart.setSize(width, height); 

refresh all charts

 $(Highcharts.charts).each(function(i,chart){ var height = chart.renderTo.clientHeight; var width = chart.renderTo.clientWidth; chart.setSize(width, height); });