title: How to make the Chart.js animate when scrolled to that section?
body: <p>I am trying to use the pie chart from Chart.js (<a href="http://www.chartjs.org/docs/#pieChart-exampleUsage" rel="noreferrer">http://www.chartjs.org/docs/#pieChart-exampleUsage</a>). Everything works smooth, but the animation happens as soon as the page loads, but since the user has to scroll down to see the chart, they won't see the animation. Is there anyway I can make the animation to start only when scrolled to that position? Also if possible, is it possible to animate everytime when that chart becomes into view?</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>&lt;canvas id="canvas" height="450" width="450"&gt;&lt;/canvas&gt;
      &lt;script&gt;
          var pieData = [
                  {
                      value: 30,
                      color:"#F38630"
                  },
                  {
                      value : 50,
                      color : "#E0E4CC"
                  },
                  {
                      value : 100,
                      color : "#69D2E7"
                  }
  
              ];
  
      var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);
  
      &lt;/script&gt;
  </code></pre>