✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Link zoom and pan actions for all subplots

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?

1 Like

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

@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()

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.

@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()