Hover Events in JavaScript

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

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'),
    d3 = Plotly.d3,
    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'),
    d3 = Plotly.d3,
    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'),
    d3 = Plotly.d3,
    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!

plotly.js runs on all SVG-compatible browsers