Morris graphs. Have custom tooltip when hover

Question

I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as

Answer 1

Piece of cake. Demo and code:

ARGUMENTS:

1: index: it represents record number i.e. from 0 to n records.

2: content: this is default hover div.

3: option : you data is inside this, before return(content);. do console.log(options) to view details.

4: row : to see the use of row below is an example.

hoverCallback: function (index, options, content, row) {
                     console.log(row);
                     var hover = "
"+row.period+"
"+row.park1+"
";
                      return hover;
                    },

UPD:

For flying label, you need to add Morris CSS stylesheet to the code - demo

IMPORTANT NOTE

Flying labels works since version 0.4.3