I want to display a bar chart - each bar is a user/student. And for each student, there will be an xAxis label displaying the students name

The below code is a VueJS computed property and called chartData

My data array for the bar chart is an array of objects. Here is how i generate it

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

Here is how I generate my labels

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

I then return on object with an array of labels and datasets with data being an array of objects

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

Here is how I render the chart:

{
  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)
  }
}

Issue: Nothing displays and there are no errors

The bar chart only seems to work when the data in the datasets is not an array of object like:

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

After Sayf-Eddine comment, i have managed to achieve this:

I changed how i returned the chartdata like:

return {
      labels: users,
      datasets: dataRow
}

However, all bars are mapping to the first label