How do I populate chart.js labels with array items?

Question

In chart.js when I try to fill labels with array items, it will display one bar with all array items as 1 label.

My expected result:
Amount of bars: 2
Labels: "val 1", "val 2"

Actual Result:
Amount of bars: 1
Labels: "val 1 val 2"

Code:

function getData() {
    return ["val 1", "val 2"];
}

// Bar Chart Example
var ctx = document.getElementById("myBarChart");
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: {
      labels: [getData()],
    datasets: [{
      label: "Aantal voldoendes",
      backgroundColor: "#4e73df",
      hoverBackgroundColor: "#2e59d9",
      borderColor: "#4e73df",
      data: [23, 21, 22, 12],
    }],
  },

If I manually fill labels like so it does work:

labels: ["val 1", "val 2"]

So now my question is, how do I fill the labels with values of my getData function?

Looks like you're placing an array into an array when you do: labels: [getData()] — Omi in a hellcat
– Omi in a hellcat, Commented Feb 25, 2020 at 15:28

user2707389 · Accepted Answer · 2020-02-25 15:26:40Z

1

Change labels: [getData()], to labels: getData(),

This is not an array, it is an array of array

 labels: [getData()]

answered Feb 25, 2020 at 15:26

user2707389

8276 silver badges12 bronze badges

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

1 Comment

Omar Ruder Over a year ago

Aah I see, thanks for the quick and helpful respond

Collectives™ on Stack Overflow

How do I populate chart.js labels with array items?

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