CODEWITHSUNDEEP
javascriptplotly
John Soklaski
John Soklaski

Reputation: 101

Plotly.js hover across multiple subplots

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?

Upvotes: 10

Views: 4968

Answers (3)

Gnanesh
Gnanesh

Reputation: 718

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'...]

Upvotes: 1

Naga Sudhir
Naga Sudhir

Reputation: 51

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

Upvotes: 1

user7717464
user7717464

Reputation: 11

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

Upvotes: 1

Related Questions