Link zoom and pan actions for all subplots

plotly.js
1

Is there a way to zoom in on one subplot and have every other subplot zoom in on the same place?

Right now I have a streaming application and I want to find a way to synchronise the zooming in on a trace and have corresponding trace segments from other subplots to follow the zooming of one graph. Is this possible?

Untitled
Untitled.png985Ă—759 46.3 KB

1 Like
2

Not easily at the moment.

You can subscribe to https://github.com/plotly/plotly.js/issues/2173 for the most up-to-date development info.

1 Like
3

@Daifaityr234 Here is the code snippet.

app=dash.Dash()

app.layout = html.Div([
                dcc.Graph(id='graph',figure=fig),
                html.Pre(id='relayout-data', style=styles['pre']),
                dcc.Graph(id='graph2', figure=fig)])

@app.callback(Output('relayout-data', 'children'),
              [Input('basic-interactions', 'relayoutData')])
def display_relayout_data(relayoutData):
    return json.dumps(relayoutData, indent=2)


@app.callback(Output('graph2', 'figure'),
             [Input('graph', 'relayoutData')], # this triggers the event
             [State('graph2', 'figure')])
def graph_event(select_data,  fig):
    try:
       fig['layout'] = {'xaxis':{'range':[select_data['xaxis.range[0]'],select_data['xaxis.range[1]']]}}
    except KeyError:
       fig['layout'] = {'xaxis':{'range':[zoomed out value]}}
return fig

app.run_server()
4

would you have a full working example that I could run for this? I have an app where I generate a few rows of graphs via a loop. Each row contains two graphs. For each row, I want to be able to zoom on one graph and automatically update the zoom on the graph in the same row. I think your code could help but unable to test it to try and understand how it works. Thanks.

5

@cl_frp Here is the test code

fig={'data':[go.Scatter(x=np.random.randint(1,100,10), y=np.random.randint(1,100,10),mode='markers')]}

app=dash.Dash()

app.layout = html.Div([
dcc.Graph(id='graph',figure=fig ),
html.Pre(id='relayout-data', style={'border': 'thin lightgrey solid','overflow':'scroll'}),
dcc.Graph(id='graph2', figure=fig )])

@app.callback(Output('relayout-data', 'children'),
                      [Input('graph', 'relayoutData')])
def display_relayout_data(relayoutData):
     return json.dumps(relayoutData, indent=2)


@app.callback(Output('graph2', 'figure'),
             [Input('graph', 'relayoutData')], 
             [State('graph2', 'figure')])
def graph_event(select_data,  fig):
    try:
        fig['layout'] = {'xaxis':{'range':[select_data['xaxis.range[0]'],select_data['xaxis.range[1]']]},
                         'yaxis':{'range':[select_data['yaxis.range[0]'],select_data['yaxis.range[1]']]}}
    except KeyError:
        fig['layout'] = {'xaxis':{'range':[0,100]},
                         'yaxis':{'range':[0,100]}}
    
    return fig

app.run_server()
6

Thanks a lot for this. It works great though when I try adding a third graph which I’d like to update similarly to graph2 I get errors. I don’t know how to check the shape/content of “select_data” so hard to fix it. That’s what I tried:

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import numpy as np

fig={'data':[go.Scatter(x=np.random.randint(1,100,10), y=np.random.randint(1,100,10),mode='markers')]}

app=dash.Dash()

app.layout = html.Div([
dcc.Graph(id='graph',figure=fig ),
html.Pre(id='relayout-data', style={'border': 'thin lightgrey solid','overflow':'scroll'}),
dcc.Graph(id='graph2', figure=fig ),
dcc.Graph(id='graph3', figure=fig ),
])

@app.callback(Output('relayout-data', 'children'),
                      [Input('graph', 'relayoutData')])

def display_relayout_data(relayoutData):
     return json.dumps(relayoutData, indent=2)


@app.callback(Output('graph2', 'figure'),
              Output('graph3', 'figure'),
             [Input('graph', 'relayoutData')],
             [State('graph2', 'figure')],
             [State('graph3', 'figure')])

def graph_event(select_data,  fig):
    try:
        fig['layout'] = {'xaxis':{'range':[select_data['xaxis.range[0]'], select_data['xaxis.range[1]'], select_data['xaxis.range[2]']]},
                         'yaxis':{'range':[select_data['yaxis.range[0]'], select_data['yaxis.range[1]'], select_data['yaxis.range[2]']]}}
    except KeyError:
        fig['layout'] = {'xaxis':{'range':[0,100]},
                         'yaxis':{'range':[0,100]}}

    return fig

if __name__ == '__main__':
    app.run_server()

Thank you very much.