title: Chart.js - Positioning Donut Label
body: <p>I have a web page that is using Chart.js. In this page, I am rendering three donut charts. In the middle of each chart, I want to show the percentage of the donut that is filled. Currently, I have the following code, which can be seen in this <a href="http://jsfiddle.net/uha5tseb/1/">Fiddle</a>.</p>
  
  <pre><code>function setupChart(chartId, progress) {
    var canvas = document.getElementById(chartId);
    var context = canvas.getContext('2d');
  
    var remaining = 100 - progress;
    var data = {
      labels: [ 'Progress', '', ],
      datasets: [{
        data: [progress, remaining],
        backgroundColor: [
          '#8FF400',
          '#FFFFFF'
        ],
        borderColor: [
          '#8FF400',
          '#408A00'
        ],
        hoverBackgroundColor: [
          '#8FF400',
          '#FFFFFF'
        ]
      }]
    };
  
    var options = {
      responsive: true,
      maintainAspectRatio: false,
      scaleShowVerticalLines: false,
  
      cutoutPercentage: 80,
      legend: {
        display: false
      },
      animation: {
        onComplete: function () {
          var xCenter = (canvas.width / 2) - 20;
          var yCenter = canvas.height / 2 - 40;
  
          context.textAlign = 'center';
          context.textBaseline = 'middle';
  
          var progressLabel = data.datasets[0].data[0] + '%';
          context.font = '20px Helvetica';
          context.fillStyle = 'black';
          context.fillText(progressLabel, xCenter, yCenter);
        }
      }
    };
  
    Chart.defaults.global.tooltips.enabled = false;
    var chart = new Chart(context, {
      type: 'doughnut',
      data: data,
      options: options
    });
  }
  </code></pre>
  
  <p>The chart "runs". But the problem is with the rendering of the label. The label is not vertically and horizontally centered within the middle of the donut. The position of the label changes based on the screen resolution too. You can see the label change position by resizing the frame that the charts are rendered in within the <a href="http://jsfiddle.net/uha5tseb/1/">Fiddle</a>.</p>
  
  <p>My question is, how do I consistently position the percentage in the middle of the donut? My page is a responsive page so, having consistent positioning is important Yet, I'm not sure what else to do. I feel like the <code>textAlign</code> and <code>textBaseline</code> properties aren't working, or I'm misunderstanding their usage.</p>
  
  <p>Thanks!</p>