me puedes ayudar. quiero mostrar mis datos en valor porcentual. pero mi etiqueta no está definida. ¿Cómo le muestro mi etiqueta?
var options = { tooltips: { custom: true }, plugins: { datalabels: { display: true, formatter: (value, ctx) => { let datasets = ctx.chart.data.datasets; if (datasets.indexOf(ctx.dataset) === datasets.length - 1) { let sum = datasets[0].data.reduce((a, b) => a + b, 0); let percentage = Math.round((value / sum) * 100) + '%'; return percentage; } else { return percentage; } }, color: '#fff', } } }; var ctx = document.getElementById("pie-chart").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { datasets: data }, options: options });Se supone que la matriz de etiquetas no está en el conjunto de datos en sí, pero se supone que está en el objeto de datos principal de la siguiente manera:
var data = [{ data: [50, 55, 60, 33], backgroundColor: [ "#4b77a9", "#5f255f", "#d21243", "#B27200" ], borderColor: "#fff" }]; var options = { plugins: { datalabels: { formatter: (value, ctx) => { let sum = 0; let dataArr = ctx.chart.data.datasets[0].data; dataArr.map(data => { sum += data; }); let percentage = (value * 100 / sum).toFixed(2) + "%"; return percentage; }, color: '#fff', } } }; var ctx = document.getElementById("pie-chart").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ["India", "China", "US", "Canada"], datasets: data }, options: options }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.min.js"></script> <canvas id="pie-chart"></canvas>