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?

• Omi in a hellcat: Looks like you're placing an array into an array when you do: labels: [getData()]

Answer 1

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

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

 labels: [getData()] 

• Omar Ruder: Aah I see, thanks for the quick and helpful respond