Problem with stacked bar chart in javascript

[maxbrouwer15]

I’m trying to get a stacked bar chart, but the only thing i’m getting is a bar with the value of the first data point. Is there anyone who knows where it goes wrong?

HTML:

<canvas id="myChart8" width="450" height="150"></canvas>

Javascript:

var ctx = document.getElementById('myChart8').getContext('2d');
var chart8 = new Chart(ctx, {

type: 'bar',


data: {
labels: ["Score1,Score2,Score3"],
datasets: [{
data: [33, 34, 33],
backgroundColor:["#f38b4a","#56d798","#ff8397"],

}]
},

options: {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true,
}]
}
}
});

[m3g4p0p]

Hi @maxbrouwer15, you got the labels wrong – in your code you have a single label "Score1,Score2,Score3", but it should be an array of strings:

labels: ["Score1", "Score2", "Score3"]

[maxbrouwer15]

Hi @m3g4p0p, i see, thank you. But now it still plots three bars alongside of eachother instead of on top of eachother

[m3g4p0p]

I’m not particularly familiar with chart.js, but it seems that stacking is meant to be used with multiple datasets, like e.g.

var chart8 = new Chart(ctx, {
  type: 'bar',

  data: {
    labels: ["Score1", "Score2", "Score3"],
    datasets: [{
      label: "Foo",
      data: [10, 20, 30],
      backgroundColor: "#661141",

    }, {
      label: "Bar",
      data: [30, 15, 20],
      backgroundColor: "#AA5585",

    }]
  },

  options: {
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true,
      }]
    }
  }
})