Tengo un gráfico horizontal con diferentes colores para agrupar los datos. En el siguiente código, el diseño del gráfico se muestra según lo previsto, pero la leyenda muestra un solo color (amarillo). ¿Cómo puedo forzar el gráfico para que muestre la leyenda de los otros dos sin dejar de mantener el diseño del gráfico? Las leyendas deben ser "Grupo 1" para amarillo, "Grupo 2" para naranja y "Grupo 3" para rosa.
var ctx = document.getElementById("myChart").getContext("2d"); var dataArr = [21, 34, 21, 90, 88, 88, 22, 11, 10, 62, 55, 96, 62]; var dataLabelsArr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M"]; var dataColorsArr = ["yellow", "yellow", "yellow", "yellow", "orange", "orange", "orange", "orange", "orange", "hotpink", "hotpink", "hotpink", "hotpink"]; var data = { datasets: [{ label: dataLabelsArr, backgroundColor: dataColorsArr, data: dataArr }] }; var myBarChart = new Chart(ctx, { type: 'bar', data: { labels: dataLabelsArr, datasets: [{ data: dataArr, backgroundColor: dataColorsArr, label: "Group 1" }] }, options: { indexAxis: 'y', } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <canvas id="myChart" width="350" height="175"></canvas>Solo proporciona un único conjunto de datos, por lo que obtendrá solo 1 elemento de leyenda. Este elemento de leyenda usa el primer color de fondo que ve como el color de la leyenda.
Para lograr lo que desea, necesita usar 3 conjuntos de datos diferentes, cada uno con un solo color de fondo estático. Luego, puede usar la notación de objetos para hacer coincidir los puntos con la etiqueta X correcta o puede pasar una cantidad X de valores nulos para llenar el espacio
Solución basada en la respuesta de LeeLenalee
const ctx = document.getElementById("myChart").getContext("2d"); const labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M"]; const group1Data = [21, 34, 21, 90]; const group2Data = [88, 88, 22, 11, 10]; const group3Data = [62, 55, 96, 62]; const getResultData = (mainIndex, ...data) => data.reduce((acc, data, index) => { if (mainIndex === index) return acc.concat(data); return acc.concat(data.map(() => null)); }, []); const groups = [ { label: 'Group 1', data: getResultData(0, group1Data, group2Data, group3Data), backgroundColor: 'yellow' }, { label: 'Group 2', data: getResultData(1, group1Data, group2Data, group3Data), backgroundColor: 'orange' }, { label: 'Group 3', data: getResultData(2, group1Data, group2Data, group3Data), backgroundColor: 'hotpink' } ]; const myBarChart = new Chart(ctx, { type: 'bar', data: { labels, datasets: groups.map((group) => ({ ...group, barPercentage: groups.length })) }, options: { indexAxis: 'y', } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> <canvas id="myChart" width="350" height="175"></canvas>