title: Highcharts problems with animation of column chart
body: <p>I am using Highcharts and want to make column chart that has nice animation when data changes. Animation has to be such that existing columns change their height.</p>
  
  <p>I created a fiddle (<a href="http://jsfiddle.net/Martinsos/Z2L6b/" rel="nofollow">http://jsfiddle.net/Martinsos/Z2L6b/</a>), where Method 3 does animation that I want, but does not work when there are many columns (they just blink instead of animate).</p>
  
  <pre><code>&lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="height: 400px"&gt;&lt;/div&gt;
  &lt;button id="button1"&gt;Method 1&lt;/button&gt;
  &lt;button id="button2"&gt;Method 2&lt;/button&gt;
  &lt;button id="button3"&gt;Method 3&lt;/button&gt;
  </code></pre>
  
  <p>_ </p>
  
  <pre><code>$(function () {
      var getRandomData = function(size, addition) {
          if (!addition) addition = 5;
          var data = [];
          var len = Math.random() * size + addition;
          var i;
          for (i = 0; i &lt; len; i++) {
              data.push(Math.random() * 50);
          }
          return data;
      };
  
      $('#container').highcharts({
          chart: {
                  type: 'column',
              },
          series: [{
              data: getRandomData(100)
          }]
      });
  
      $('#button1').click(function() {
          var chart = $('#container').highcharts();
  
          chart.series[0].setData(getRandomData(100), false); // No animation happens
  
          chart.redraw();
      });
  
      $('#button2').click(function() {
          var chart = $('#container').highcharts();
  
          chart.series[0].remove();
          chart.addSeries({data: getRandomData(100)}); // Animation happens, but not the kind     I want
  
          chart.redraw();
      });
  
      var method3 = function(chart, size, addition) {
          var series = chart.series[0];
          var data = getRandomData(size, addition);
          var seriesLen = series.data.length;
          $.each(data, function(index, newPoint) {
              if (index &lt; seriesLen) {
                  series.data[index].update(newPoint, false);
              } else {
                  series.addPoint([index, newPoint], false);
              }
          });
          while (seriesLen &gt; data.length) {
              series.data[seriesLen-1].remove(false);
              seriesLen--;
          }
  
          chart.redraw();
      };
  
      $('#button3').click(function() { // Works as I want it
          var chart = $('#container').highcharts();
          method3(chart, 100);
          chart.redraw();
      });
  
      $('#button4').click(function() { // Fails for large chart
          var chart = $('#container').highcharts();
          method3(chart, 100, 500);
          chart.redraw();
      });
  });
  </code></pre>
  
  <p>How can I make that animation work always, even for large amount of columns?
  I also have similar problem with line charts: if they have more then about 200 hundred points and I do setData on multiple series and then redraw, they sometimes just blink instead of animating. How can I solve that?</p>
  
  <p>Thank you</p>