Chartjs-ChartJS: Grouped Stacked Bar Chart not Grouping

by

1👍

✅

The config you are using should work, the reason it not working is likely to be your verry outdated version of Chart.js. I suspect you are still using version 2.4.0. If you upgrade to 2.9.4 it will work

https://jsfiddle.net/Leelenaleee/6h2ey8mu/8/

2👍

Your definition uses Chart.js v2 syntax and it seems to work fine if you use the latest version of Chart.js v2 (2.9.4) as shown below.

const stackedBarChartData = {
  barPercentage: 1.0,
  //labels: stackedBarData['skills'],
  labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
  datasets: [{
      label: 'Dataset 1',
      data: [0, 1, 3, 4, 2, 4, 5, 9],
      backgroundColor: '#D6E9C6',
      stack: 'Stack 0',
    },
    {
      label: 'Dataset 2',
      data: [0, 12, 3, 6, 2, 4, 8, 9],
      backgroundColor: '#FAEBCC',
      stack: 'Stack 0',
    },
    {
      label: 'Dataset 3',
      data: [0, 1, 3, 4, 2, 4, 5, 9],
      backgroundColor: '#EBCCD1',
      stack: 'Stack 1',
    },
  ]
};
const groupedChartOptions = {
  type: 'bar',
  data: stackedBarChartData,
  options: {
    scales: {
      scaleShowValues: true,
      xAxes: [{
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'A'
        },
        ticks: {
          autoSkip: false
        },
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'B'
        },
        gridLines: {
          display: false
        }
      }]
    },
    title: {
      display: true,
      text: 'XYZ'
    }
  }
};
new Chart('myChart', groupedChartOptions);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" height="120"></canvas>

Leave a comment