title: Chart.js Doughnut with rounded edges and text centered
body: <p>I am trying to achieve rounded corners similar to this article <a href="https://stackoverflow.com/questions/36934967/chart-js-doughnut-with-rounded-edges">here</a>, but combined with text in the centre, so far i have the code below, but i am not sure how to combine both ideas  </p>
  
  <p>Any help would be appreciated!</p>
  
  <p>the image looks like below, donut with text image:</p>
  
  <p><img src="https://i.stack.imgur.com/2HSOd.png" /></p>
  
  <p>and my code is as follows to produce the text inside the donut.</p>
  
  <pre><code>Chart.types.Doughnut.extend({
     name: "DoughnutTextInside",
     showTooltip: function() {
         this.chart.ctx.save();
         Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
         this.chart.ctx.restore();
  },
  draw: function() {
      Chart.types.Doughnut.prototype.draw.apply(this, arguments);
  
      var width = this.chart.width,
          height = this.chart.height;
  
      var fontSize = (height / 114).toFixed(2);
      this.chart.ctx.font = fontSize + "em Lato";
      this.chart.ctx.textBaseline = "middle";
  
      var text = "40%",
          textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
          textY = height / 2;
  
      this.chart.ctx.fillText(text, textX, textY);
     }
  });
  
  var data = [{
     label: "Wins %",
     value: 120,
     color: "#2ecc71"
  }, {
     label: "Losses %",
     value: 240,
     color: "#dddddd"
  }, {
     value: 0,
     color: "#888888"
  }];
  
  var DoughnutTextInsideChart = new Chart($('#myChart')  [0].getContext('2d')).DoughnutTextInside(data, {
     responsive: true,
     segmentShowStroke: false,
     animationEasing: "easeInOutQuint",
  });
  </code></pre>