I want to create a custom Doughnut chart with rounded ends like this : https://stackoverflow.com/a/60993320

So I have create the following class :

import * as ChartJS from "chart.js";

class DoughnutRoundedController extends ChartJS.DoughnutController {
  draw(ease) {
    var ctx = this.chart.ctx;
    var easingDecimal = ease || 1;
    var arcs = this.getMeta().data;
    ChartJS.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();
    });
  }
}

ChartJS.Chart.register(DoughnutRoundedController);

But when I try to use, I got the following error : Error: "doughnutRounded" is not a registered controller.

Here my code :

import React from "react";
import "chart.js/auto";
import { Chart } from "react-chartjs-2";
import "./chartjs-extensions/DoughnutRoundedController";

const data = {
  labels: ["BBL", "USDT", "BUSD", "USDC"],
  datasets: [
    {
      label: "My First Dataset",
      data: [125, 125, 125, 125],
      backgroundColor: [
        "rgb(255, 99, 132)",
        "rgb(54, 162, 235)",
        "rgb(255, 205, 86)",
        "rgb(49, 12, 86)",
      ],
      hoverOffset: 4,
    },
  ],
};

function BalanceChart(props) {
  
  return (
    <div>
      <Chart
        data={data}
        type="doughnutRounded"
      />
    </div>
  );
}

Someone know how to solve this ?

Have a good day