title: Count up values in Chart JS
body: <p>how do I make the values in Chart JS update as the bar progresses?</p>
  
  <p>For example, I want the values for each bar to start at 0 and count up to there value, stopping when the bar has reached it's height.</p>
  
  <p>At the moment, it just displays it's full value upon animation start (when the page loads)</p>
  
  <p>Chart JS docs:
  <a href="https://www.chartjs.org/" rel="nofollow noreferrer">https://www.chartjs.org/</a></p>
  
  <p>Here is a plugin I found:
  <a href="https://emn178.github.io/chartjs-plugin-labels/samples/demo/" rel="nofollow noreferrer">https://emn178.github.io/chartjs-plugin-labels/samples/demo/</a></p>
  
  <p>Here is a JS Fiddle (ignore the shaking!)
  <a href="https://jsfiddle.net/8uehq5xr/" rel="nofollow noreferrer">https://jsfiddle.net/8uehq5xr/</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Horizontal Bar Chart&lt;/title&gt;
  &lt;script src="../../node_modules/chart.js/dist/Chart.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.min.js"&gt; 
  &lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin- 
  labels/src/chartjs-plugin-labels.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;canvas id="bar-chart" width="800" height="450"&gt;&lt;/canvas&gt;
  
  &lt;div id="value"&gt;100&lt;/div&gt;
  
  &lt;Script&gt;
  
  
  // Bar chart
  new Chart(document.getElementById("bar-chart"), {
  type: 'bar',
  data: {
    labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
  
    datasets: [
      {
        label: "Population (millions)",
        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
        data: [2478,5267,734,784,433]
      }
    ]
  },
  
  
  
  options: 
  {
      plugins: {
          labels: 
          {
              render: 'value',
  
              fontSize: 20,
          }
      },
      scales: {
        xAxes: [{
          display: false
        }],
        yAxes: [{
          display: false
        }],
      },
      tooltips: { enabled: true},
      hover: {animationDuration: 1},
  
  }
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>