Chartjs multi dimensional bar chart

Question

I am trying to make a a stacked bar chart which contains data for my machines per day. Only close thing I have found chartjs stacked group chart but it does not do exactly what I need. How can I do this? You can view my data and expected chart as images below

Answer 1

You can create a stacked barchart in chartjs using "stacked: true" on the x or y axis. This will allow you to create the stacking style you want from the screenshot above. To get the bars grouped like that, you can pass the data in arrays using data sets.

An example of this (this is not stacked, but groups like above, showing successes and failures for each service):

                <script>
                var ctx = document.getElementById('dataQualitySmall');
                var dataQualitySmall = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['Name1', 'Name2', 'Name3', 'Name4', 'Name5', 'Name6'],
                        datasets: [{
                            label: '# suceesses',
                            stack: 'Stack 0',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: 
                                'rgba(90, 220, 40)',
                            borderColor: 
                                'rgba(90, 220, 40)',
                            borderWidth: 1
                        },
                            {
                                label: '# failures',
                                stack: 'Stack 1',
                                data: [2, 1, 7, 0, 3, 1],
                                backgroundColor: 
                                    'rgba(220, 40, 40)',
                                borderColor: 
                                    'rgba(220, 40, 40)',
                                borderWidth: 1
                            }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            </script>

You could then edit this to include the stacked:true on the axis you want to stack the data.

Information about how to do this can be found on the documentation site as well as samples of all the charts you can create: https://www.chartjs.org/docs/latest/charts/bar.html

Answer 2

You can use stacked group chart. You can create the same layout as your screenshot. You can see the preview here : https://codesandbox.io/s/sandbox-group-stacked-xxhy8

      var barChartData = {
  labels: ["01/01/2020", "02/01/2020", "03/01/2020"],
  datasets: [
    {
      label: "created",
      backgroundColor: "blue",
      stack: "M1",
      data: [10, 5, 15]
    },
    {
      label: "destroyed",
      backgroundColor: "red",
      stack: "M1",
      data: [3, 2, 1]
    },
    {
      label: "created",
      backgroundColor: "blue",
      stack: "M2",
      data: [7, 4, 6]
    },
    {
      label: "destroyed",
      backgroundColor: "red",
      stack: "M2",
      data: [1, 2, 4]
    },
    {
      label: "created",
      backgroundColor: "blue",
      stack: "M3",
      data: [15, 11, 9]
    },
    {
      label: "destroyed",
      backgroundColor: "red",
      stack: "M3",
      data: [3, 1, 1]
    }
  ]
};

but this was creating multiple labels of the same name to prevent this you can hide the repeated labels by setting legend.labels.generateLabels under options .

legend: {
  labels: {
    generateLabels: function(chart) {
      return Chart.defaults.global.legend.labels.generateLabels
        .apply(this, [chart])
        .filter(function(item, i) {
          return i <= 1;
        });
    }
  }
}

For stack labels you can use plugins chartjs-plugin-datalabels and add the following object under options:-

plugins: {
      datalabels: {
        align: "end",
        anchor: "start",
        color: "black",
        formatter: function(value, context) {
          let ds = context.chart.data.datasets;
          // check if it's the first ds
          if (ds[context.datasetIndex - 1]) {
            // check if the ds is in the same stack as the ds before
            if (
              ds[context.datasetIndex - 1].stack ===
              ds[context.datasetIndex].stack
            ) {
              return "";
            } else {
              return ds[context.datasetIndex].stack;
            }
          } else {
            return ds[context.datasetIndex].stack;
          }
        }
      }
    }

*I have renamed the stacks to "M1", "M2" ,"M3" to satisy your requirements.

**For more you can refer to "chartjs-plugin-datalabels" ,click here