1Chart.defaults.groupableBar = Chart.helpers.clone(Chart.defaults.bar);
2
3var helpers = Chart.helpers;
4Chart.controllers.groupableBar = Chart.controllers.bar.extend({
5  calculateBarX: function (index, datasetIndex) {
6    // position the bars based on the stack index
7    var stackIndex = this.getMeta().stackIndex;
8    return Chart.controllers.bar.prototype.calculateBarX.apply(this, [index, stackIndex]);
9  },
10
11  hideOtherStacks: function (datasetIndex) {
12    var meta = this.getMeta();
13    var stackIndex = meta.stackIndex;
14
15    this.hiddens = [];
16    for (var i = 0; i < datasetIndex; i++) {
17      var dsMeta = this.chart.getDatasetMeta(i);
18      if (dsMeta.stackIndex !== stackIndex) {
19        this.hiddens.push(dsMeta.hidden);
20        dsMeta.hidden = true;
21      }
22    }
23  },
24
25  unhideOtherStacks: function (datasetIndex) {
26    var meta = this.getMeta();
27    var stackIndex = meta.stackIndex;
28
29    for (var i = 0; i < datasetIndex; i++) {
30      var dsMeta = this.chart.getDatasetMeta(i);
31      if (dsMeta.stackIndex !== stackIndex) {
32        dsMeta.hidden = this.hiddens.unshift();
33      }
34    }
35  },
36
37  calculateBarY: function (index, datasetIndex) {
38    this.hideOtherStacks(datasetIndex);
39    var barY = Chart.controllers.bar.prototype.calculateBarY.apply(this, [index, datasetIndex]);
40    this.unhideOtherStacks(datasetIndex);
41    return barY;
42  },
43
44  calculateBarBase: function (datasetIndex, index) {
45    this.hideOtherStacks(datasetIndex);
46    var barBase = Chart.controllers.bar.prototype.calculateBarBase.apply(this, [datasetIndex, index]);
47    this.unhideOtherStacks(datasetIndex);
48    return barBase;
49  },
50
51  getBarCount: function () {
52    var stacks = [];
53
54    // put the stack index in the dataset meta
55    Chart.helpers.each(this.chart.data.datasets, function (dataset, datasetIndex) {
56      var meta = this.chart.getDatasetMeta(datasetIndex);
57      if (meta.bar && this.chart.isDatasetVisible(datasetIndex)) {
58        var stackIndex = stacks.indexOf(dataset.stack);
59        if (stackIndex === -1) {
60          stackIndex = stacks.length;
61          stacks.push(dataset.stack);
62        }
63        meta.stackIndex = stackIndex;
64      }
65    }, this);
66
67    this.getMeta().stacks = stacks;
68    return stacks.length;
69  },
70});
71
72var data = {
73  labels: ["January", "February", "March", "April", "May", "June", "July"],
74  datasets: [
75    {
76      label: "My First dataset",
77      backgroundColor: "rgba(99,255,132,0.2)",
78      data: [59, 80, 81, 56, 55, 40, 65],
79      stack: 1
80    },
81    {
82      label: "My Second dataset",
83      backgroundColor: "rgba(99,132,255,0.2)",
84      data: [80, 81, 56, 55, 40, 65, 60],
85      stack: 2
86    },
87    {
88      label: "My Third dataset",
89      backgroundColor: "rgba(255,99,132,0.2)",
90      data: [60, 59, 80, 81, 56, 55, 40],
91      stack: 2
92    }
93  ]
94};
95
96var ctx = document.getElementById("myChart").getContext("2d");
97new Chart(ctx, {
98  type: 'groupableBar',
99  data: data,
100  options: {
101    scales: {
102      yAxes: [{
103        ticks: {
104          max: 160,
105        },
106        stacked: true,
107      }]
108    }
109  }
110});
111