Hover Events in JavaScript

How to bind callback functions to hover events in D3.js-based JavaScript charts.

New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

Hover Event Data

{
  points: [{
    curveNumber: 2,  // index in data of the trace associated with the selected point 
    pointNumber: 2,  // index of the selected point
    x: 5,        // x value
    y: 600,      // y value
    data: {/* */},       // ref to the trace as sent to Plotly.newPlot associated with the selected point
    fullData: {/* */},   // ref to the trace including all the defaults
   xaxis: {/* */},   // ref to x-axis object (i.e layout.xaxis) associated with the selected point
   yaxis: {/* */}    // ref to y-axis object " "
  }, {
    /* similarly for other selected points */
  }]
}

Capturing Hover Events: Data

var myPlot = document.getElementById('myDiv'),
    hoverInfo = document.getElementById('hoverinfo'),
    N = 16,
    x = d3.range(N),
    y1 = d3.range(N).map( d3.random.normal() ),
    y2 = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y1, type:'scatter', name:'Trial 1',
        mode:'markers', marker:{size:16} },
        { x:x, y:y2, type:'scatter', name:'Trial 2',
        mode:'markers', marker:{size:16} } ];
    layout = {
        hovermode:'closest',
        title:'Hover on Points'
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_hover', function(data){
    var infotext = data.points.map(function(d){
      return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
    });

    hoverInfo.innerHTML = infotext.join('<br/>');
})
 .on('plotly_unhover', function(data){
    hoverInfo.innerHTML = '';
});

Capturing Hover Events: Pixels

var myPlot = document.getElementById('myDiv'),
    hoverInfo = document.getElementById('hoverinfo'),
    N = 16,
    x = d3.range(N),
    y1 = d3.range(N).map(d3.random.normal()),
    y2 = d3.range(N).map(d3.random.normal()),
    data = [{x:x, y:y1, type:'scatter', name:'Trial 1',
        mode:'markers', marker:{size:16}},
        {x:x, y:y2, type:'scatter', name:'Trial 2',
        mode:'markers', marker:{size:16}}],
    layout = {hovermode:'closest',
              title:'Hover on Points to see<br>Pixel Coordinates'};

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_hover', function(data){
    var xaxis = data.points[0].xaxis,
        yaxis = data.points[0].yaxis;
    var infotext = data.points.map(function(d){
      return ('width: '+xaxis.l2p(d.x)+', height: '+yaxis.l2p(d.y));
    });

    hoverInfo.innerHTML = infotext.join('<br/>');
})
 .on('plotly_unhover', function(data){
    hoverInfo.innerHTML = '';
});

Triggering Hover Events

var myPlot = document.getElementById('myDiv'),
    hoverButton = document.getElementById('hoverbutton'),
    N = 16,
    x = d3.range(N),
    y1 = d3.range(N).map( d3.random.normal() ),
    y2 = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y1, type:'scatter', name:'Trial 1',
        mode:'markers', marker:{size:16} },
        { x:x, y:y2, type:'scatter', name:'Trial 2',
        mode:'markers', marker:{size:16} } ];
    layout = {
        hovermode:'closest',
        title:'Click "Go" button to trigger hover'
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_beforehover',function(){
    return false;
});

hoverButton.addEventListener('click', function(){
    var curve1 = Math.floor(Math.random()*2),
        curve2 = Math.floor(Math.random()*2),
        point1 = Math.floor(Math.random()*14),
        point2 = Math.floor(Math.random()*14);
    Plotly.Fx.hover('myDiv',[
        {curveNumber:curve1, pointNumber:point1},
        {curveNumber:curve2, pointNumber:point2}
    ]);
});

Coupled Hover Events

var myPlot = document.getElementById('myDiv'),
    N = 12,
    x1 = d3.range(N).map( d3.random.normal() ),
    x2 = d3.range(N).map( d3.random.normal() ),
    x3 = d3.range(N).map( d3.random.normal() ),
    y1 = d3.range(N).map( d3.random.normal() ),
    y2 = d3.range(N).map( d3.random.normal() ),
    y3 = d3.range(N).map( d3.random.normal() ),
    months = ['January', 'February', 'March', 'April',
              'May', 'June', 'July', 'August',
              'September', 'October', 'November', 'December']
    data = [{ x: x1, y: y1, text: months, type: 'scatter', name: '2014', hoverinfo: 'text+x+y',
              mode: 'markers', marker: {color: 'rgba(200, 50, 100, .7)', size: 16}
            },
            { x: x2, y: y2, text: months, type: 'scatter', name: '2015', hoverinfo: 'text+x+y',
             mode: 'markers', marker: {color: 'rgba(120, 20, 130, .7)', size: 16}
            },
            { x: x3, y: y3, text: months, type: 'scatter', name: '2016', hoverinfo: 'text+x+y',
             mode: 'markers', marker: {color: 'rgba(10, 180, 180, .8)', size: 16}
            }];
    layout = {
        hovermode:'closest',
        title:'Display Hover Info for Related Points',
        xaxis:{zeroline:false, hoverformat: '.2r'},
        yaxis:{zeroline:false, hoverformat: '.2r'}
     };

Plotly.newPlot('myDiv', data, layout);

myPlot.on('plotly_hover', function (eventdata){
    var points = eventdata.points[0],
        pointNum = points.pointNumber;

    Plotly.Fx.hover('myDiv',[
        { curveNumber:0, pointNumber:pointNum },
        { curveNumber:1, pointNumber:pointNum },
        { curveNumber:2, pointNumber:pointNum },
    ]);
});

Combined Click and Hover Events

This is a more complex example that uses both hover, and click events to display traces. Take a look in the codepen javascript!