How to place a text on morris.js bar graph

Question

I have a morris.js bar graph. I want to place count on top of this graph. I looked into morris.js bar doc, could not find any.

On hover it should display

Answer 1

You can extend Morris to achieve this. Please refer to this answer to see a full working snippet.

Add a property:

Bar.prototype.defaults["labelTop"] = false;

Add a prototype to draw the label:

Bar.prototype.drawLabelTop = function(xPos, yPos, text) {
    var label;
    return label = this.raphael.text(xPos, yPos, text)
        .attr('font-size', this.options.gridTextSize)
        .attr('font-family', this.options.gridTextFamily)
        .attr('font-weight', this.options.gridTextWeight)
        .attr('fill', this.options.gridTextColor);
};

Modify the Bar.prototype.drawSeries protoype, adding these lines (before the last else):

if (this.options.labelTop && !this.options.stacked) {
    label = this.drawLabelTop((left + (barWidth / 2)), top - 10, row.y[sidx]);
    textBox = label.getBBox();
    _results.push(textBox);
}

Then set the labelTop property to true in your Morris Bar config:

labelTop: true