How do I zoom in over multiple vertically stacked subplots together

📊 Plotly Python
1

Hi ,

How will i be able to zoom in like sumultaneosly over all the vertically stacked subplots together. Currently , if i say zoomin , i can only soom in on subplot 1 and rest all subplots remain the same. I am looking for , all the subplots to zoomin together with the same scale.

Can this be achieved ?

-Thanks
Jay

1 Like
2

I have the same request for javascript

Thanks

Ali

3

In Python, you can share the x or y axes between subplots, as described in this example. The syntax is

fig = make_subplots(rows=3, cols=1, shared_xaxes=True)

In Javascript, here is the codepen corresponding to the Python example above. Note that you have to use the matches property of the different x axes so that they all match together.

Hope this helps!

4

Thanks Emmanuelle, but it’s not the use case I am interested in. The x axes cannot be shared because they are not on the same scale. The first X axis is defined by [x_min, x_max] and the second by [x_min/(1+z), x_max/(1+z)] (z is a fixed parameter), they are related but different. This use case could be achieved if I could “connect” the zoom event from the first graph to the second, even if they don’t share the same axis. I think it would be a new feature for plotly, but maybe it’s achievable through some hack …

Thanks

Ali

5

I found a way of doing this by catching zoom event with on(‘plotly_relayout’…) callback and applying it to the other graph using Plotly.relayout . I can make a codepen if someone is interested.

Ali

6

Hi, I have exactly the same problem and I would be interested in an example how to best do this.
What I’m most worried about is that I will get circular callbacks when applying the zoom to the other subplot so I guess we will need some hidden state?

7

Yes you have to worry about that, but not with a hidden state, you have to maintain a boolean for each plot of your graph

myGraph.on('plotly_relayout', async function(eventdata){

if (!graphUnderRelayout[0] && !graphUnderRelayout[1])
{
if (eventdata['xaxis.range[0]']) do_sthing
}

do_sthing being in that form:

if(!graphUnderRelayout[0])
{
Plotly.relayout('mygraph',myrelayout).then(()=>{graphUnderRelayout[0]=false})
graphUnderRelayout[0]=true
}

I’ll try to make a simple example on codepen if that’s not clear enough (I cannot share my code for the moment and and anyway there are too many other things to be meaningful).

8

Thanks a lot @aliallaoui for the response. Actually I missed that you pointed out above that you are interested in JS plotly. I need to do it in Python. But I get the idea from your example and now I’m thinking I might achieve something similar with client side callbacks.

1 Like
9

I tried it but how did you get the graphUnderRelayout[1]. I can’t access it individually, is there any binding ?