con chart.js 3.8.0, ¿es posible consolidar etiquetas en un gráfico de barras apiladas? La solución más cercana que he encontrado es agregar la devolución de llamada del pie de página de información sobre herramientas y agregar texto adicional en la información sobre herramientas manualmente, pero no incluye el icono de leyenda/color asociado con ese conjunto de datos.
HTML de ejemplo:
<html> <head></head> <body> <h1> Stacked Bar Chart (chart.js) </h1> <canvas id="chart_display"></canvas> </body> </html>Javascript de ejemplo:
const data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'Retained', data: [62,68,74,80,66,84], backgroundColor: 'rgb(0, 178, 169)', order: 3, stack: 'stack1' }, { label: 'Expired', data: [5,3,7,9,2,4], backgroundColor: 'rgb(207, 16, 45)', order: 3, stack: 'stack1' } ] } const config = { type: 'bar', data: data, options: { scales: { x: { stacked: true }, y: { stacked: true } } }, }; const reportOutput = new Chart( document.getElementById('chart_display'), config );Parece ser posible en versiones anteriores como se ve aquí: https://www.chartjs.org/docs/3.5.0/samples/bar/stacked.html
Con suerte, acabo de pasar por alto una opción de configuración simple.
Debe agregar mode: 'index' a la configuración de información sobre herramientas para lograr ese comportamiento:
const data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [{ label: 'Retained', data: [62, 68, 74, 80, 66, 84], backgroundColor: 'rgb(0, 178, 169)', order: 3, stack: 'stack1' }, { label: 'Expired', data: [5, 3, 7, 9, 2, 4], backgroundColor: 'rgb(207, 16, 45)', order: 3, stack: 'stack1' } ] } const config = { type: 'bar', data: data, options: { plugins: { tooltip: { mode: 'index' } }, scales: { x: { stacked: true }, y: { stacked: true } } }, }; const reportOutput = new Chart( document.getElementById('chart_display'), config ); <script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script> <html> <head></head> <body> <h1> Stacked Bar Chart (chart.js) </h1> <canvas id="chart_display"></canvas> </body> </html>