title: ChartJS 2.0 animation
body: <p>I've run into a problem using ChartJS 2.2.1 when I tried to build timeline chart (line chart + time option).  </p>
  
  <h2> Approach 1: Wrong animation</h2>
  
  <p>I request new value from server ( in format [time,value] ) every 5 seconds and I want only 10 points on screen, so, when new data come in, I:</p>
  
  <ul>
  <li>remove oldest point from chart</li>
  <li>add new point</li>
  </ul>
  
  <p>The problem here is animation - chart not shifts to the left - it's just redraws on the same place.</p>
  
  <h2> Approach 2: Bad at all</h2>
  
  <p>My solution to get this 'shift' animation is add data to chart, moving min and max time values to keep only 10 values on screen (without removing it):</p>
  
  <pre><code>    line_chart.chart.config.data.datasets[0].data.push({x: moment.utc(time).toDate(), y: value});
      line_chart.update();
  
      line_chart.config.options.scales.xAxes[0].time.min = line_chart.chart.config.data.datasets[0].data[line_chart.chart.config.data.datasets[0].data.length - onscreen_points].x;
      line_chart.config.options.scales.xAxes[0].time.max = moment.utc(time).toDate();
  </code></pre>
  
  <p>I guess that's not the best idea and I've already had some troubles with this approach.<br>
  Is here any other solution?</p>
  
  <p>P.S. In ChartJS 1.0 this 'shift' animation works well with first approach. </p>