title: Highcharts - column chart redraw animation
body: <p>I'm trying to update an existing data series with a new data array and invoke the <code>redraw</code> 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 <a href="http://www.highcharts.com/studies/dynamic.htm" rel="nofollow">example by Highcharts</a> (fiddle around with the existing data set then click on the button <em>"Set new data to selected series"</em>) but I can't replicate this behavior.</p>
  
  <p>This is what code that I've written:</p>
  
  <pre><code>  var series, newSeriesThreshold = this.chart.series.length * 2;
  
    for (var i = 0; i &lt; data.length; i += 2) {
      series = {
        name:  this.data[i].title,
        data:  this.data[i].data,
        color: this.data[i].color
      };
  
      if (i &gt;= newSeriesThreshold) {
        this.chart.addSeries(series, false);
      } else {
        var currentSeries = this.chart.series[i / 2];
        currentSeries.setData(series.data, false);
      }
    }
  
    this.chart.redraw();
  </code></pre>
  
  <p>These are the options when creating the chart:</p>
  
  <pre><code>  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) + ": &lt;b&gt;" + this.y.toString().toCurrency(0) + '&lt;/b&gt;';
        }
      },
      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
      }
    };
  </code></pre>
  
  <p>This yields an immediate update without transitioning effects. Any ideas what I might be doing wrong?</p>