Chatjs Stacked chart

by Mukesh Yadav

HTML

<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<div style="width: 100%">
  <canvas id="canvas"></canvas>
</div>

JavaScript

var datasets = [];

var barChartData = {
  labels: ['Mar 2018', 'Apr 2018', 'May 2018', 'Jun 2018'],
  datasets: [{
    label: 'Dataset 1',
    backgroundColor: window.chartColors.red,
    stack: 'Stack 0',
    data: [
      10,
      20,
      5
    ]
  }, {
    label: 'Dataset 2',
    backgroundColor: window.chartColors.blue,
    stack: 'Stack 1',
    data: [
      10,
      20,
      30,
      2
    ]
  }, {
    label: 'Dataset 3',
    backgroundColor: window.chartColors.green,
    stack: 'Stack 2',
    data: [
      10,
      20,
      30,
      1,
      10
    ]
  }, {
    label: 'Dataset 3',
    backgroundColor: window.chartColors.orange,
    stack: 'Stack 3',
    data: [
      10,
      20,
      30,
      1
    ]
  }, {
    label: 'Dataset 3',
    backgroundColor: window.chartColors.yellow,
    stack: 'Stack 4',
    data: [
      10,
      20,
      30,
      1
    ]
  }]

};

var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
  type: 'bar',
  data: barChartData,
  options: {
    title: {
      display: true,
      text: 'Chart.js Bar Chart - Stacked'
    },
    tooltips: {
      enabled: true,
      mode: 'single',
      callbacks: {
        title: function(t, d) {
          console.log('title', t, d);
          return 'Title';
        },
        label: function(t, d) {
          console.log('label', t, d);
          return ['Label'];
        }
      }
    },
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});