Chartjs-How to set different colors in each stacked bar chart cell?

by

0👍

With colors you define the colors for datasets. With two colors you define two datasets. With your two arrays in data you have two datasets, that’s why you can’t see an additional color.
You need a third dataset for a third color, with 0 at the labels where you don’t want a bar.

Check out the following example (Working example at JSBin):

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March"],
    datasets: [{
      label: 'Dataset 1',
      backgroundColor: 'black',
      data: [0, 8, 4]      
    }, {
      label: 'Dataset 2',
      backgroundColor: "red",
      data: [6, 2, 8],
    }, {
      label: 'Dataset 3',
      backgroundColor: "blue",
      data: [3, 0, 0]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

-1👍

Have you tried to add more data?

 data: [[2,12], [5], [1], [4], [3]],
 labels: labels,
 colors: [chartBlue, chartGreen],

Try it and see what happens to the chart 🙂

Leave a comment