GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing plotly.com — Hover events in JavaScript

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: {text: '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: {text: '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 = '';
});

Hover Anywhere in the Plot Area

New in 3.5

By default, plotly_hover fires only when the cursor is over a trace. Set hoveranywhere to true in the layout, and the event also fires over empty plot space.

An event from empty space carries an empty points array. The event reports the cursor position in two forms. xvals and yvals hold data-space coordinates. xPixel and yPixel hold pixels from the top-left corner of the graph div.

plotly_unhover fires once when the cursor leaves the plot area.

var data = [{
  x: [1, 2, 3, 4, 5],
  y: [2, 4, 3, 5, 4],
  type: 'scatter',
  mode: 'markers',
  marker: {size: 14}
}];

var hoverPrompt = 'Hover anywhere in the plot area';

var layout = {
  title: {text: 'Hover Anywhere'},
  hovermode: 'closest',
  hoveranywhere: true,
  annotations: [{
    text: hoverPrompt,
    xref: 'paper',
    yref: 'paper',
    x: 0.02,
    y: 0.98,
    xanchor: 'left',
    yanchor: 'top',
    showarrow: false
  }]
};

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

var hoverReadout = hoverPrompt;

// Redraw only when the text changes, because plotly_hover fires on every cursor move
function showHoverReadout(text) {
  if (text === hoverReadout) return;
  hoverReadout = text;
  Plotly.relayout('myDiv', {'annotations[0].text': text});
}

document.getElementById('myDiv').on('plotly_hover', function(eventData) {
  if (eventData.points.length) {
    var point = eventData.points[0];
    showHoverReadout('Over a point: x = ' + point.x + ', y = ' + point.y);
  } else {
    // points is empty over blank space, so read the cursor position from xvals and yvals
    showHoverReadout('Empty space: x = ' + eventData.xvals[0].toFixed(2) +
      ', y = ' + eventData.yvals[0].toFixed(2));
  }
});

document.getElementById('myDiv').on('plotly_unhover', function() {
  showHoverReadout(hoverPrompt);
});

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: {text: '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: {text: '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!

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.