He creado un complemento para un chat circular. La idea del complemento es centrar los datos en el medio de la rosquilla.

 const [data1, setData1] = useState() const [plugins, setPlugins] = useState([]) const dashboardInfo = useSelector((state) => state.dashboardInfo.data); useEffect(() => { const xxxNE = dashboardInfo.division ? Object.values(dashboardInfo.division[0]) : ['']; const sikPercentage = xxxNE[1] ? xxxNE[1][0].percentage : '' const trPercentage = xxxNE[1] ? xxxNE[1][1].percentage : '' setData1({ labels: [ // legend labels "SIK: " + sikPercentage + '%', "TR: " + trPercentage + '%' ], datasets: [{ label: '# of Votes', data: [2, 3], backgroundColor: [ '#fb6340', 'rgba(54, 162, 235, 0.5)', ], borderColor: ['#fff', '#fff'], borderWidth: 2, cutout: '90%', }] }) setPlugins([{ beforeDraw: function (chart) { var width = chart.width, height = chart.height, ctx = chart.ctx; ctx.restore(); var fontSize = (height / 180).toFixed(2); ctx.font = fontSize + "em Montserrat"; ctx.textBaseline = "top"; ctx.textAlign = 'center'; ctx.fillText(40 + ' / ' + sikPercentage + '%', width / 2, height / 2); ctx.save(); } }]) }, [dashboardInfoData, setData1, setPlugins]) return ( <Doughnut data={data1} plugins={plugins} options={{ legend: false, legendCallback: function (circleData) { var ul = document.createElement('ul'); var borderColor = circleData.datasets[0].borderColor; var dataValue = circleData.datasets[0].data; circleData.data.labels.forEach(function (label, index) { ul.innerHTML += ` <li> <span style="background-color: ${borderColor[index]} ";></span> ${label} ${dataValue[index]} </li> `; }); return ul.outerHTML; }, } } />

El problema es que el complemento no muestra los datos. ¿Alguna idea de lo que me estoy perdiendo?

Gracias