Estoy tratando de agregar etiquetas a cada burbuja en el gráfico de burbujas usando chartjs-plugin-datalabels. Para cada burbuja, quiero mostrar la propiedad de la etiqueta de cada objeto de la matriz data.dataset
como "Pomelo", "Lima". Obtengo el valor de r para todas las burbujas. ¿Podemos cambiar esta etiqueta?
Vi ejemplos pero no los entendí bien. No sé qué estoy haciendo mal.
const data = { datasets: [ { label: 'Grapefruit', data: [ { x: 10, y: 40, r: 40, }, ], backgroundColor: 'rgb(255, 99, 132)', }, { label: 'Lime', data: [ { x: 23, y: 37, r: 40, }, ], backgroundColor: 'rgb(105, 89, 175)', }, { label: 'Coconut', data: [ { x: 26, y: 33, r: 40, }, ], backgroundColor: 'rgb(249, 236, 61)', }, { label: 'Mango', data: [ { x: 40, y: 40, r: 40, }, ], backgroundColor: 'rgb(255, 128, 0)', }, ], }; const options = { scales: { x: { display: false }, y: { display: false } }, maintainAspectRatio: false, plugins: { legend: { display: false, }, datalabels: {}, }, }; const App = () => { return <Bubble data={data} height={415} width={310} options={options} />; };Puede usar la función de formatter en el complemento de etiquetas de datos para lograr esto:
Chart.register(ChartDataLabels) const options = { type: 'bubble', data: { datasets: [{ label: 'Orange', data: [{ x: 1, y: 4, r: 26, fruit: 'orange' }], backgroundColor: 'orange' }, { label: 'Apple', data: [{ x: 4, y: 2, r: 26, fruit: 'apple' }], backgroundColor: 'red' }, { label: 'Grape', data: [{ x: 6, y: 1, r: 26 }], backgroundColor: 'purple' } ] }, options: { plugins: { datalabels: { color: 'white', formatter: (dp, ctx, b) => (ctx.dataset.label) } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2 "></script> </body>