Estoy creando un tablero simple que tiene un gráfico de barras que muestra la cantidad de pedidos de una empresa. Muestra la cantidad pedida cada día durante la última semana, la cantidad de hoy y la cantidad de pedidos programados para los próximos días.
Estoy usando colores para diferenciar cada uno de estos 3 momentos, pero no puedo encontrar una solución para tener 3 etiquetas, cada una con el color correcto (azul para 'la semana pasada', naranja para 'hoy' y gris para 'programado') ).
enlace para el gráfico de barras actual, ya que todavía no tengo suficientes puntos
Puede usar la función generateLabels para esto:
var options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1, backgroundColor: ['lightblue', 'lightblue', 'lightblue', 'orange', 'orange', 'gray'] }] }, options: { plugins: { legend: { labels: { generateLabels: () => { return [{ datasetIndex: 0, // Since its all 1 dataset just hide if it gets clicked, remove this line for legend click to do nothing text: 'Last week', fillStyle: 'lightBlue', strokeStyle: 'lightBlue' }, { datasetIndex: 0, // Since its all 1 dataset just hide if it gets clicked, remove this line for legend click to do nothing text: 'Today', fillStyle: 'orange', strokeStyle: 'orange' }, { datasetIndex: 0, // Since its all 1 dataset just hide if it gets clicked, remove this line for legend click to do nothing text: 'Scheduled', fillStyle: 'grey', strokeStyle: 'grey' } ]; } } } } } } 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.6.0/chart.js"></script> </body>