Quiero crear un gráfico de anillos personalizado con extremos redondeados como este: https://stackoverflow.com/a/60993320

Así que he creado la siguiente clase:

 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);

Pero cuando intento usarlo, aparece el siguiente error: Error: "donutRounded" no es un controlador registrado.

Aquí mi código:

 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> ); }

Alguien sabe como solucionar esto?

Que tengas un buen día