Grouped Stacked Bar Chart - chart.js

by Ketan Patel

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];
        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: false,
      position: "left",
      id: "y-axis-1",
      gridLines: {
        display: false
      },
      labels: {
        show: true
      }
    }]
  }
}
var data = {
  labels: ["Opening Balance"],
  datasets: [{
    type: 'bar',
    label: "Income",
    data: [258900],
    fill: true,
    backgroundColor: 'rgba(42, 180, 192, .3)',
    borderWidth: 1,
    borderColor: '#166269',
    hoverBackgroundColor: '#2ab4c0',
    hoverBorderColor: '#2ab4c0',
    stack: 'Income'
  }, {
    type: 'bar',
    label: "Income Expected",
    data: [320000],
    fill: true,
    backgroundColor: 'rgba(76, 135, 185, .4)',
    borderWidth: 1,
    borderColor: '#2a587f',
    hoverBackgroundColor: '#4c87b9',
    hoverBorderColor: '#2a587f',
    stack: 'Income'
  }, {
    type: 'bar',
    label: "Income Expected",
    data: [320000],
    fill: true,
    backgroundColor: 'rgba(76, 135, 185, .4)',
    borderWidth: 1,
    borderColor: '#2a587f',
    hoverBackgroundColor: '#4c87b9',
    hoverBorderColor: '#2a587f',
    stack: 'Income'
  }]
};

new Chart(document.getElementById("fundStatus").getContext('2d'), {
  type: 'bar',
  data: data,
  options: options
});