I'm trying to update an existing data series with a new data array and invoke the redraw function when done. While this works perfectly, I'm not quite satisfied as I'd like to have a sort of grow/shrink transition. I have seen an example by Highcharts (fiddle around with the existing data set then click on the button "Set new data to selected series") but I can't replicate this behavior.

This is what code that I've written:

  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 yields an immediate update without transitioning effects. Any ideas what I might be doing wrong?

I'm trying to update an existing data series with a new data array and invoke the redraw function when done. While this works perfectly, I'm not quite satisfied as I'd like to have a sort of grow/shrink transition. I have seen an example by Highcharts (fiddle around with the existing data set then click on the button "Set new data to selected series") but I can't replicate this behavior.

This is what code that I've written:

  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 yields an immediate update without transitioning effects. Any ideas what I might be doing wrong?

• javascript
• jquery
• highcharts

• What's the error ? Can you log your data response to see if it's the expected value ? – Ricardo Lohmann Commented Jun 25, 2012 at 11:49
• There is no error. The chart is just updated with the new values without any transition effects. Stepping through the source code, doAnimation = animation && series.animate yields false as series.animate is null! – Leonard Commented Jun 25, 2012 at 11:58
• I didn't need to do a redraw to see the updated data, but I too am wondering why there is no transition effect on column charts. – Ethereal Commented May 30, 2013 at 20:58
• 1 here is the answer: stackoverflow./a/16011343/1356019 it's work for me... – Mahdi Commented Aug 13, 2013 at 13:06

3 Answers 3

I have solved this problem by destroying and creating again the chart.

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

The answer es from the highcharts 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);
        });
    });

This remain a mystery. I managed to make the axis update which suggests that there is some kind of animation going on, but it's applied only to the axis, and not the columns.

In the end, I've settled with this behavior.

This might help:

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

to update all charts

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