Quiero mostrar un gráfico de barras: cada barra es un usuario/estudiante. Y para cada estudiante, habrá una etiqueta xAxis que muestra el nombre del estudiante.

El siguiente código es una propiedad computada de VueJS y se llama chartData

Mi matriz de datos para el gráfico de barras es una matriz de objetos. Así es como lo genero

 let dataRow = this.responses.map((d) => { return { label: d.user.name, data: [d.grade], } });

Así es como genero mis etiquetas

 let users = []; this.responses.map((d) => { users.push(d.user.name) });

Luego vuelvo al objeto con una matriz de etiquetas y conjuntos de datos, siendo los datos una matriz de objetos

 return { labels: users, datasets: [{ data: dataRow }], }

Así es como represento el gráfico:

 { extends: Bar, props: ["chartdata"], data() { return { options: { responsive: true, maintainAspectRatio: false, scales: { yAxes: [{ ticks: { beginAtZero: true, max: 100 } }], }, } } }, mounted() { this.renderChart(this.chartdata, this.options) } }

Problema: No aparece nada y no hay errores

El gráfico de barras solo parece funcionar cuando los datos en los conjuntos de datos no son una matriz de objetos como:

 testData: { labels: ['test', 'test', 'test'], datasets: [{ data: [65, 59, 80], }] }

Después del comentario de Sayf-Eddine, logré lograr esto:

Cambié la forma en que devolví los datos del gráfico como:

 return { labels: users, datasets: dataRow }

Sin embargo, todas las barras se asignan a la primera etiqueta.