Friday, March 27, 2020

Published Friday, March 27, 2020 by with 0 comment

How to Link Plotly Events Between Plots

Wouldn't it be cool if you could hover over one plot, and have it automatically trigger the hover on another plot?
As an example of what I'm talking about, here's a quick demo I put together showing the hover of one plot triggering the hover 50 points over in another plot:

See the Pen plotly link hover by Robert Hamner (@rhamner) on CodePen.

The implemention is remarkably simple though. I have two plots in divs with ids of 'sin' and 'cos'. For each plot I:
  • trigger a method on hover
  • in that method, get the hover location, offset by 50, and trigger the hover in the other plot at that offset location
Here is the code that triggers the 'cos' hover whenever you hover over 'sin':

document.getElementById('sin').on('plotly_hover', function(data) {
    { curveNumber: 0, pointNumber: (data.points[0].x + 50)%100 }

Unfortunately, Plotly.Fx is not documented so it's hard to find what else you can do. Another obvious set of commands to link though are zoom and pan (just update layout of the linked plot). Here is an example of that also:

See the Pen Plotly link zoom by Robert Hamner (@rhamner) on CodePen.



Post a Comment