Grouped Stacked Bar Chart - chart.js

by q_sabawoon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="fundStatus"></canvas>

CSS

#fundStatus {
  min-height: 400px;
}

JavaScript

var options = {
  responsive: true,
  maintainAspectRatio: false,
  tooltips: {
    mode: 'label',
    callbacks: {
      label: function(tooltipItem, data) {
        var dataset = data.datasets[tooltipItem.datasetIndex];

        if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0)
          return null;

        return dataset.label + ': ' + numeral(dataset.data[tooltipItem.index]).format('($ 0.0 a)');
      }
    }
  },
  scales: {
    xAxes: [{
      display: true,
      gridLines: {
        display: true
      },
      labels: {
        show: true
      }
    }],
    yAxes: [{
      type: "linear",
      display: true,
      position: "left",
      id: "y-axis-1",
      gridLines: {
        display: false
      },
      labels: {
        show: false
      }
    }, {
      type: "linear",
      display: true,
      gridLines: {
        display: true
      },
      labels: {
        show: true
      },
      ticks: {
        beginAtZero: false,
        userCallback: function(value) {
          return numeral(value).format('($ 0.0 a)');
        }
      }
    }, {
      type: "linear",
      display: false,
      gridLines: {
        display: false
      },
      labels: {
        show: true
      }
    }, {
      type: "linear",
      display: false,
      gridLines: {
        display: false
      },
      labels: {
        show: true
      }
    }, {
      type: "linear",
      display: false,
      gridLines: {
        display: false
      },
      labels: {
        show: true
      }
    }, {
      type: "linear",
      display: false,
      id: "y-axis-5",
      gridLines: {
        display: false
      },
      labels: {
        show: true
      }
    }]
  },
  legend: {
    labels: {
      fontSize: 11,
      usePointStyle: true,
      padding: 15,
      filter: (legendItem, chartData) => {
        if (legendItem.datasetIndex > 0) return true;
      }
    }
  }
}
var data = {
  labels: ["Opening Balance", "Qtr-1", "Qtr-2", "Qtr-3", "Qtr-4"],
 ...