Add labels to events #124

leereilly opened this Issue Nov 24, 2012 · 3 comments


None yet

5 participants


Friendly feature request: I'd like to be able to attach labels to events. If I have more than a couple on a linegraph - it's hard to tell what they're for.

  element: 'graph',
  data: weekly_data,
  xkey: 'dem-numbers',
  ykeys: ['new', 'updated'],
  labels: ['New', 'Updated'],
  events: [
    '2012-12-25' // <---- I'd like to give this a label

Lee 🍻

tiraeth commented Nov 24, 2012

This is for sure a good thing to have. When Olly merges my HTML popup replacement I will work on providing same functionality for events/goals. Right now it isn't easy to implement labels for events/goals. Please remember that the label shouldn't be covered by a series popup.


Try this:

    // inject name-drawing
    var originalDrawEvent = Morris.Grid.prototype.drawEvent;
    Morris.Grid.prototype.gridDefaults.eventTextSize = 12;
    Morris.Grid.prototype.drawEvent = function(event, color) {
        originalDrawEvent.apply(this, arguments);

        var idx = $.inArray(event,;
        if(!this.options.eventLabels || !this.options.eventLabels[idx])

        this.raphael.text(this.transX(event), - this.options.eventTextSize, this.options.eventLabels[idx]).attr('stroke', color).attr('font-size', this.options.eventTextSize);

use it like this

            events: ["2013-04-26", "2013-04-28"]
            eventLineColors: ["#B78779", "#7580AF"],
            eventLabels: ["Foo", "Bar"],
            //eventTextSize: 12,
mkkmail commented Jun 17, 2015

Hi . thanks @MaZderMind
how can use Html in Events.
JS Bin:,js,output

@jaminellis jaminellis closed this Dec 23, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment