Documentation on Plotly hover and click events

plotly.js
1

There are examples of using hover and click events. But I can’t find any formal documentation on what gets passed to the callback function. For instance, in someplot.on('plotly_click', function(data){...});, what is the structure of the data object?

2

You’re right. We should do a better job documenting event data.

For what it’s worth, cartesian plotly_hover, plotly_click and plotly_unhover event data looks like:

{
  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.plot 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 */
  }]
}
1 Like
3

I didn’t take the time to appreciate this when you posted it. This is great information. Thanks.

4

Hiya! Plotly now has improved and consolidated Plotly.js event documentation here:

Please feel free to suggest documentation improvements in a pull request:

https://github.com/plotly/documentation/tree/source-design-merge/_posts/plotly_js/events

5

Hi @etienne
I’m trying to access the d3 events now available on plotly_hover, plotly_click and plotly_unhover but I can seem to find it.

For example, this is data emitted from the scattergl plotly_click

Screen Shot 2017-05-25 at 2.00.52 PM.png698×812 66.3 KB

6

Right, those aren’t exposed on WebGL-based plots at the moment.