title: Half Doughnut Chart with Chart.js
body: <p>Is there anyway to implement an animated indicator for chart.js doughnut charts? What I am looking to accomplish looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/2wLeh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2wLeh.png" alt="End Result"></a></p>
  
  <p>I've got the doughnut part of the chart complete, but can't seem to find a way to add the value (large text: 89% (dynamic)) or the dot for the indicator.</p>
  
  <p>The code i've used is the following: </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;canvas id="dashboardChart" width="400" height="400"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var ctx = document.getElementById("dashboardChart");
      var dashboardChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
              labels: ["Red", "Orange", "Green"],
              datasets: [{
                  label: '# of Votes',
                  data: [33, 33, 33],
                  backgroundColor: [
                      'rgba(231, 76, 60, 1)',
                      'rgba(255, 164, 46, 1)',
                      'rgba(46, 204, 113, 1)'
                  ],
                  borderColor: [
                      'rgba(255, 255, 255 ,1)',
                      'rgba(255, 255, 255 ,1)',
                      'rgba(255, 255, 255 ,1)'
                  ],
                  borderWidth: 5
              }]
  
          },
          options: {
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI,
              legend: {
                  display: false
              },
              tooltip: {
                  enabled: false
              },
              cutoutPercentage: 95
          }
      });
  </code></pre>
  
  <p>Any help is greatly appreciated!</p>