[Chartjs]-Group Chart with multiple layers in ChartJS

by

0👍

✅

There is an option to create stacked group chart in chart.js where you can have to specify the stack property based on you grouping need. See the below code or the fiddle -> http://jsfiddle.net/4h6dm2ny/

Hope it helps!

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["13Aug", "14Aug", "15Aug"],
    datasets: [{
        label: 'Blue',
        stack: 'Stack 0',
        data: [240, 270, 1320],
        backgroundColor: 'blue',
      },
      {
        label: 'Orange',
        stack: 'Stack 1',
        data: [0, 300, 1520],
        backgroundColor: 'orange',
      },
      {
        label: 'Yellow',
        data: [1500, 700, 200],
        stack: 'Stack 1',
        backgroundColor: 'yellow',
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});

Leave a comment