Plotly.js hover across multiple subplots

Question

I have a plotly.js graph with multiple subplots that share an x-axis as in https://plot.ly/javascript/subplots/#stacked-subplots-with-a-shared-x-axis

I'm trying to hover across all of the subplots so that the values of all of the points with the same x value are displayed at once.

I've attempted to solve this by calling Plotly.Fx.hover on each subplot, but it only seems to take effect for the last subplot on which it is called. http://codepen.io/john-soklaski/pen/adQwBa

The code I tried is:

Plotly.Fx.hover('myDiv', {xval: 2, curveNumber: 0}, "xy")
Plotly.Fx.hover('myDiv', {xval: 2, curveNumber: 1}, "xy2")

Ideally the API would be such that I could do this in a single call:

Plotly.Fx.hover('myDiv', [{xval: 2, curveNumber: 0, subplot: "xy"}, {xval: 2, curveNumber: 1, subplot: "xy2"}])

Any thoughts on how to get this to work?

Answer 1

I see this question is old, but this functionality has been added: https://github.com/plotly/plotly.js/pull/301

Answer 2

Plotly.plot('myDiv', data, layout);
graph = document.getElementById('myDiv');
graph.on('plotly_hover', function(eventdata) {
    if (eventdata.xvals) {
        Plotly.Fx.hover(graph, {
            xval: eventdata.xvals[0]
        }, ['xy', 'x2y2', 'x3y3', 'x4y4']);
    }
});

For multiple subplots add the axis labels array also. In this case

['xy', 'x2y2', 'x3y3', 'x4y4']

In this way you can get coupled hover events for subplots in a div

Answer 3

You'll have to pass the visible subplots as the third arg to Plotly.Fx.hover func.

This worked for me:

chartContainer.current.on('plotly_hover', function () {
  var points = eventdata.points[0]
  var pointNum = points.pointNumber
  Plotly.Fx.hover(
    chartContainer.current,
    props.data.map((_, i) => ({
      curveNumber: i,
      pointNumber: pointNum
    })),
    Object.keys((chartContainer.current)._fullLayout._plots))
})

chartContainer.current is the div here.

Object.keys((chartContainer.current)._fullLayout._plots) will return the visible plots, for example: ['xy', 'xy2'...]