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

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.

9

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