I need to create a unique visualization using a bar chart where each bar represents a user or student. Each bar will have an xAxis label displaying the student's name.
The code below is a VueJS computed property named chartData
For my bar chart data, I am using an array of objects which I generate like this
let dataRow = this.responses.map((d) => {
return {
label: d.user.name,
data: [d.grade],
}
});
This is how I create my labels
let users = [];
this.responses.map((d) => {
users.push(d.user.name)
});
The final object returned includes an array of labels and datasets containing data in the form of an array of objects
return {
labels: users,
datasets: [{
data: dataRow
}],
}
This is how the chart is rendered:
{
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)
}
}
Concern: The chart is not displaying and there are no error messages
The issue seems to be related to the format of the data in the datasets array. It appears that the bar chart only functions properly when the data is not formatted as an array of objects like:
testData: {
labels: ['test', 'test', 'test'],
datasets: [{
data: [65, 59, 80],
}]
}
Following Sayf-Eddine's comment, I made some adjustments:
https://i.stack.imgur.com/ZkOCC.png
I updated how I structure the chart data like this:
return {
labels: users,
datasets: dataRow
}
However, all bars are now mapped to the first label