10

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 a tooltip. I tried using the hoverCallback: but it doesn't seem to give me control over the particular element I am hovering over. I only get the content for that particular bar.

I have setup a JSBIN example for the same here:

When you hover over the bar it shows the index of the bar at the bottom. I want to show the content as a tool tip instead.JSBIN example

Varun Jain
  • 1,901
  • 7
  • 33
  • 66
  • You have a `typo` in your `JSBIN` example. `$(#row-content")` is missing a `"` fixing your typo I can see the graphs, however when hovering over the bars I am not seeing where it shows the index of the bar at the bottom. – Trevor Nov 08 '13 at 16:58

2 Answers2

27

Piece of cake. Demo and code:

<script type="text/javascript">
Morris.Bar({
    element: 'bar-example',
    data: [
        {y: '2006',a: 100,b: 90}, 
        {y: '2007',a: 75,b: 65}, 
        {y: '2008',a: 50,b: 40}, 
        {y: '2009',a: 75,b: 65}, 
        {y: '2010',a: 50,b: 40}, 
        {y: '2011',a: 75,b: 65}, 
        {y: '2012',a: 100,b: 90}
    ],
    hoverCallback: function(index, options, content, row) {
        return(content);
    },
    xkey: 'y',
    ykeys: ['a', 'b'],
    stacked: true,
    labels: ['Series A', 'Series B'] // rename it for the 'onhover' caption change
});
</script>

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 = "<div class='morris-hover-row-label'>"+row.period+"</div><div class='morris-hover-point' style='color: #A4ADD3'><p color:black>"+row.park1+"</p></div>";
                      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

Aditya Tomar
  • 841
  • 1
  • 13
  • 20
Ruben Kazumov
  • 3,803
  • 2
  • 26
  • 39
  • Hey Ruben, this is the default behaviour. I don't want it in row-content div. That was just for figuring out what the various parameters in the callback contain. I want the data in a tooltip element right next to the mouse. – Varun Jain Nov 10 '13 at 07:16
  • Have you a CSS sketch for the bubble? How it have to look like exactly, because it may change the play. Is ok for you just regular rectangle or it have to look like fancy callout? – Ruben Kazumov Nov 10 '13 at 07:25
  • A regular rectangle would be fine. I can change it later. – Varun Jain Nov 10 '13 at 07:31
  • 1
    Can i hide datetime or format datetime when hover ? – Thoman May 12 '14 at 11:24
  • thank you for the remark on the flying label that's what i was looking for !! – Youssef Boudaya Nov 14 '18 at 13:28
6

http://jsbin.com/finuqazofe/1/edit?html,js,output

{ y: ..., x: ..., label: "my own label"},'

...
Morris.Line({
    hoverCallback: function(index, options, content) {
        var data = options.data[index];
        $(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
    },
    ...
    other params
});
asdasd
  • 181
  • 2
  • 3