Accepted answer

Just override the draw function too (you can move it to a plugin too if you want to keep it separate - see in groupableBar

draw: function(ease) {, arguments);

    var self = this;
    // check if this is the last dataset in this stack
    if (! (dataset, index) { return (dataset.stack === self.getDataset().stack && index > self.index); })) {
        var ctx = this.chart.chart.ctx;;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillStyle = this.chart.options.defaultFontColor;
        // loop through all its rectangles and draw the label
        helpers.each(self.getMeta().data, function (rectangle, index) {
            ctx.fillText(this.getDataset().stack, rectangle._model.x, rectangle._model.y)
        }, this);

and then just use your stack labels in place of your stack index, like so

stack: 'Stack 1'

Updated fiddle -

If you want your stack labels to animate, just change _model to _view in the draw override.

A full solution would also consider the length of the stack label and rotate it (just like axis labels), but I think that's going to be a tad more complicated.

Related Query

More Query from same tag