score:1

Accepted answer

this jsfiddle may help you. jsfiddle source: github issue.

enter image description here

html

<canvas id="mychart"></canvas>

script

chart.defaults.groupablebar = chart.helpers.clone(chart.defaults.bar);

var helpers = chart.helpers;
chart.controllers.groupablebar = chart.controllers.bar.extend({
  calculatebarx: function (index, datasetindex) {
    // position the bars based on the stack index
    var stackindex = this.getmeta().stackindex;
    return chart.controllers.bar.prototype.calculatebarx.apply(this, [index, stackindex]);
  },

  hideotherstacks: function (datasetindex) {
    var meta = this.getmeta();
    var stackindex = meta.stackindex;

    this.hiddens = [];
    for (var i = 0; i < datasetindex; i++) {
      var dsmeta = this.chart.getdatasetmeta(i);
      if (dsmeta.stackindex !== stackindex) {
        this.hiddens.push(dsmeta.hidden);
        dsmeta.hidden = true;
      }
    }
  },

  unhideotherstacks: function (datasetindex) {
    var meta = this.getmeta();
    var stackindex = meta.stackindex;

    for (var i = 0; i < datasetindex; i++) {
      var dsmeta = this.chart.getdatasetmeta(i);
      if (dsmeta.stackindex !== stackindex) {
        dsmeta.hidden = this.hiddens.unshift();
      }
    }
  },

  calculatebary: function (index, datasetindex) {
    this.hideotherstacks(datasetindex);
    var bary = chart.controllers.bar.prototype.calculatebary.apply(this, [index, datasetindex]);
    this.unhideotherstacks(datasetindex);
    return bary;
  },

  calculatebarbase: function (datasetindex, index) {
    this.hideotherstacks(datasetindex);
    var barbase = chart.controllers.bar.prototype.calculatebarbase.apply(this, [datasetindex, index]);
    this.unhideotherstacks(datasetindex);
    return barbase;
  },

  getbarcount: function () {
    var stacks = [];

    // put the stack index in the dataset meta
    chart.helpers.each(this.chart.data.datasets, function (dataset, datasetindex) {
      var meta = this.chart.getdatasetmeta(datasetindex);
      if (meta.bar && this.chart.isdatasetvisible(datasetindex)) {
        var stackindex = stacks.indexof(dataset.stack);
        if (stackindex === -1) {
          stackindex = stacks.length;
          stacks.push(dataset.stack);
        }
        meta.stackindex = stackindex;
      }
    }, this);

    this.getmeta().stacks = stacks;
    return stacks.length;
  },
});

var data = {
  labels: ["january", "february", "march", "april", "may", "june", "july"],
  datasets: [
    {
      label: "my first dataset",
      backgroundcolor: "rgba(99,255,132,0.2)",
      data: [59, 80, 81, 56, 55, 40, 65],
      stack: 1
    },
    {
      label: "my second dataset",
      backgroundcolor: "rgba(99,132,255,0.2)",
      data: [80, 81, 56, 55, 40, 65, 60],
      stack: 2
    },
    {
      label: "my third dataset",
      backgroundcolor: "rgba(255,99,132,0.2)",
      data: [60, 59, 80, 81, 56, 55, 40],
      stack: 2
    }
  ]
};

var ctx = document.getelementbyid("mychart").getcontext("2d");
new chart(ctx, {
  type: 'groupablebar',
  data: data,
  options: {
    scales: {
      yaxes: [{
        ticks: {
          max: 160,
        },
        stacked: true,
      }]
    }
  }
});

Related Query

More Query from same tag