Black Lives Matter. Please consider donating to Black Girls Code today.

Zoom or pan one Graph to zoom or pan in other Graph

Dash
#1

Hi,

I am looking for a method where we will zoom/pan in one graph which results in Zoom/Pan in other Graph.

Is it possible to do?

Thanks,
Sanjaya G prakash.

#2

Seems like you could listen to the relayoutData property of one chart and then update the figure.layout.xaxis.range property of different graph. See http://dash.plot.ly/interactive-graphing for a starting point.

#3

Thanks @chriddyp I got it now

#4

Hi,

I’m having trouble with the output to the second graph. Can someone or Sanjayagp show an example on how to do it?

With
Input(“graph1”, “relayoutData”),
should the output be:
Output(“graph2”, “relayoutData”),
or
Output(“graph2”, “figure.layout.xaxis.range”),

And if it is the second, in what format should the callback return the values to the output?

Any help is much appreciated.

#6

@sanjayagp Here is the code snippet for synchronizing zoom in plotly dash

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)])

# Just to see what values are captured.
@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]']]}}
    except KeyError:
       fig['layout'] = {'xaxis':{'range':[zoomed out value]}}
return fig

app.run_server()