Chart JS how to display an array of data objects as bar chart

Question

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

I think you can use directly data and not datasets array object return { labels: users, data: dataRow } — Sayf-Eddine
– Sayf-Eddine, Commented Feb 23, 2022 at 14:43
@Sayf-Eddine I tried that but it didnt change anything. However, i did try this: return { labels: users, datasets: dataRow } and the bars in the chart displayed, but not across all labels The labels rendered, but all bars seemed to map the first label in the array — jacklove315
– jacklove315, Commented Feb 23, 2022 at 14:54
Try to use chart.js 2.7.1 and vue-chartjs 3.5.1. Demo codesandbox.io/s/intelligent-liskov-ms9rt7 — Vitaliy Rayets
– Vitaliy Rayets, Commented Feb 23, 2022 at 15:08
@VitaliyRayets i checked out that codesandbox and figured out what was wrong with my code. when i return the data row object for a bar, im doing: return { label: d.user.name, data: [d.grade], } . I changed the property data to y and it worked: ` return { label: d.user.name, y: [d.grade], } ` — jacklove315
– jacklove315, Commented Feb 23, 2022 at 15:23

jacklove315 · Accepted Answer · 2022-02-23 15:32:34Z

1

After Vitaliy Rayets comment i figured out what was wrong

i needed to return the data row like:

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

**I changed the property 'data' to 'y' **

answered Feb 23, 2022 at 15:32

jacklove315

831 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vitaliy Rayets Over a year ago

You can also use parsing for your custom properties chartjs.org/docs/latest/general/…

Collectives™ on Stack Overflow

Chart JS how to display an array of data objects as bar chart

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related