Tengo problemas con las etiquetas de mis chartsjs. mi gráfico genera bien, estoy tratando de configurar el gráfico para que las etiquetas de datos sean para la parte de texto de los datos y no para la parte de números. mi código muestra las etiquetas de datos como 4, 6 y 2 donde las necesito para mostrar el texto: yo, tú y ellos.
<script> var ctx = document.getElementById('myChart4').getContext('2d'); var myChart4 = new Chart(ctx, { plugins: [ChartDataLabels], type: 'doughnut', data: { labels: ['me','you','them' ], datasets: [{ label: false, data: [4,6,2 ], }] }, options: { responsive: false, plugins: { datalabels: { color: 'black', anchor: 'end', align: 'end', offset: 15 }, legend: { display: false }, title: { display: true, text:'Reason' } }, responsive: false, onClick: (evt, activeEls) => { show(); }, } });Puede usar la función de formatter para esto:
Chart.register(ChartDataLabels) const options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: 'orange' }] }, options: { plugins: { datalabels: { color: 'black', anchor: 'end', align: 'end', offset: 15, formatter: (val, ctx) => (ctx.chart.data.labels[ctx.dataIndex]) }, } } } 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.6.0/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script> </body>