title: Chartjs 3 doughnut chart rounded corners
body: <p>I am using chart js version 3 and I want to draw doughnut with rounded edges I find the solution with the version 2 of chart js however due to breaking changes in chart js 3 I couldn't make the solution compatible with version 3.<br />
  Here is the working solution in version 2</p>
  <pre><code>Chart.defaults.RoundedDoughnut    = Chart.helpers.clone(Chart.defaults.doughnut);
  Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
      draw: function(ease) {
          var ctx           = this.chart.ctx;
          var easingDecimal = ease || 1;
          var arcs          = this.getMeta().data;
          Chart.helpers.each(arcs, function(arc, i) {
              arc.transition(easingDecimal).draw();
  
              var pArc   = arcs[i === 0 ? arcs.length - 1 : i - 1];
              var pColor = pArc._view.backgroundColor;
  
              var vm         = arc._view;
              var radius     = (vm.outerRadius + vm.innerRadius) / 2;
              var thickness  = (vm.outerRadius - vm.innerRadius) / 2;
              var startAngle = Math.PI - vm.startAngle - Math.PI / 2;
              var angle      = Math.PI - vm.endAngle - Math.PI / 2;
  
              ctx.save();
              ctx.translate(vm.x, vm.y);
  
              ctx.fillStyle = i === 0 ? vm.backgroundColor : pColor;
              ctx.beginPath();
              ctx.arc(radius * Math.sin(startAngle), radius * Math.cos(startAngle), thickness, 0, 2 * Math.PI);
              ctx.fill();
  
              ctx.fillStyle = vm.backgroundColor;
              ctx.beginPath();
              ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
              ctx.fill();
  
              ctx.restore();
          });
      }
  });
  
  window.onload = function() {
      new Chart(document.getElementById('usersChart'), {
          type   : 'RoundedDoughnut',
          data   : {
              datasets: [
                  {
                      data           : [40, 20, 20, 20],
                      backgroundColor: [
                          '#e77099',
                          '#5da4e7',
                          '#8f75e7',
                          '#8fe768'
                      ],
                      borderWidth    : 0
                  }]
          },
          options: {
              cutoutPercentage: 70
          }
      });
  };
  </code></pre>
  <p>here is the result chart:<br />
  <a href="https://i.stack.imgur.com/N5OeE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N5OeE.png" alt="https://i.stack.imgur.com/PindI.png" /></a></p>