Chart.js Doughnut with rounded edges and text centered

Question

I am trying to achieve rounded corners similar to this article here, but combined with text in the centre, so far i have the code below, but i am not sure how to combine bot

Answer 1

I work on the same project and make this

  Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
  const costume = Chart.controllers.doughnut.extend({
    draw(ease) {
      Chart.controllers.doughnut.prototype.draw.call(this, ease);
      const { ctx } = this.chart.chart;

      const easingDecimal = ease || 1;
      const arcs = this.getMeta().data;

      Chart.helpers.each(arcs, function(arc, index) {
        arc.transition(easingDecimal).draw();

        const vm = arc._view;

        const radius = (vm.outerRadius + vm.innerRadius) / 2;
        const thickness = (vm.outerRadius - vm.innerRadius - 2) / 2;
        const startAngle = Math.PI - vm.startAngle - Math.PI / 2;
        const angle = Math.PI - vm.endAngle - Math.PI / 2;

        if (index % 2 == 1) {
          ctx.save();
          ctx.fillStyle = vm.backgroundColor;

          ctx.translate(vm.x, vm.y);
          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();
        }
        if (index == 2) {
          ctx.save();
          ctx.fillStyle = arcs[1]._view.backgroundColor;

          ctx.translate(vm.x, vm.y);
          ctx.beginPath();
          ctx.arc(
            radius * Math.sin(startAngle),
            radius * Math.cos(startAngle),
            thickness,
            0,
            2 * Math.PI,
          );
          ctx.fill();
          ctx.restore();
        }
      });
    },
  });

  const deliveredData = {
    labels: ['1', '2', '3', '4'],
    datasets: [
      {
        data: [5, 40, 5, 30],
        backgroundColor: ['#fff', '#ff0000', '#fff', '#ffff00'],
      },
    ],
  };

  Chart.controllers.RoundedDoughnut = costume;
  const newChartInstance = new Chart(chartRef.current, {
    type: 'RoundedDoughnut',
    data: deliveredData,
    options: { cutoutPercentage: 75, legend: { display: false }, tooltips: { enabled: false } },
  });