Estoy teniendo dificultades para configurar el complemento outlabels en chart js para React.

Como nota, cada vez que intento importar el complemento outlabels, aparece un error de combinación en la consola, y luego no puedo registrarlo correctamente para graficar js. No estoy seguro si necesito importar esto o si funciona de inmediato agregando un propiedad adicional a opciones u objetos de datos. Esto no está claro en la documentación.

El siguiente código es lo que tengo hasta ahora basado en algunas excavaciones de Google 😕

 import React from 'react'; import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'; import ChartDataLabels from "chartjs-plugin-datalabels"; // import "chartjs-plugin-piechart-outlabels"; import { Pie } from 'react-chartjs-2'; import styles from "./PieChart.module.scss"; ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels); const COLORS = [ "#2ecc71", "#3498db", "#95a5a6", "#9b59b6", "#f1c40f", "#e74c3c", "#34495e" ]; const options = { responsive: true, plugins: { legend: { display: false }, title: { display: false }, datalabels: { display: false }, outlabels: { display: true } } }; const data = { plugins: { outlabels: { backgroundColor: null, color: COLORS, stretch: 30, font: { resizable: true, minSize: 15, maxSize: 20, }, zoomOutPercentage: 100, textAlign: 'start', } }, labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [ { label: '# of Votes', data: [12, 19, 3, 5], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', ], borderWidth: 1 }, ], }; function PieChart() { return ( <div className={styles.pieChartJsContainer}> <Pie data={data} options={options} /> {/* type={"outlabeledPie"}*/} </div>) } export default PieChart;

Quiero lograr algo como esto: https://i.stack.imgur.com/LWKCy.png

Agradezco si alguien pudiera ayudar 🙏 gracias!