Necesito el valor del gráfico que se muestra después del nombre de los datos, por ejemplo ([color de los datos] Coche 50, [color de los datos] Motocicleta 200). He intentado cambiar el valor del título de la leyenda pero no funciona en absoluto.
Aquí está mi código
var ctx = document.getElementById('top-five').getContext('2d'); var myChartpie = new Chart(ctx, { type: 'pie', data: { labels: {!! $top->pluck('name') !!}, datasets: [{ label: 'Statistics', data: {!! $top->pluck('m_count') !!}, backgroundColor: {!! $top->pluck('colour') !!}, borderColor: {!! $top->pluck('colour') !!}, }] }, options: { plugins:{ legend:{ display:true, title:{ text: function(context) {//I've tried to override this but doesn't work var value = context.dataset.data[context.dataIndex]; var label = context.label[context.dataIndex]; return label+' '+value; }, } }, }, responsive: true, } });Puede usar una función de generateLabels etiquetas personalizada para esto:
var options = { type: 'doughnut', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], }] }, options: { plugins: { legend: { labels: { generateLabels: (chart) => { const datasets = chart.data.datasets; return datasets[0].data.map((data, i) => ({ text: `${chart.data.labels[i]} ${data}`, fillStyle: datasets[0].backgroundColor[i], })) } } } } } } var 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.5.1/chart.js"></script> </body>Lo siguiente es una anulación directa de la generación de etiquetas predeterminada que se encuentra en el controlador aquí . Realicé un cambio en la propiedad de text dentro de la función generateLabels para agregar el valor de los datos. Conserva la alternancia de datos y el estilo tachado cuando se alterna una etiqueta.
plugins: { legend: { labels: { generateLabels(chart) { const data = chart.data; if (data.labels.length && data.datasets.length) { const {labels: {pointStyle}} = chart.legend.options; return data.labels.map((label, i) => { const meta = chart.getDatasetMeta(0); const style = meta.controller.getStyle(i); return { text: `${label}: ${data['datasets'][0].data[i]}`, fillStyle: style.backgroundColor, strokeStyle: style.borderColor, lineWidth: style.borderWidth, pointStyle: pointStyle, hidden: !chart.getDataVisibility(i), // Extra data used for toggling the correct item index: i }; }); } return []; } }, onClick(e, legendItem, legend) { legend.chart.toggleDataVisibility(legendItem.index); legend.chart.update(); } } //... } [1]: https://github.com/chartjs/Chart.js/blob/master/docs/samples/legend/html.md