How to get zoom level in time series data as callback input in Dash

Question

Given a line graph with time series data in Dash (Plotly) dashboard, when I zoom in and the resolution of the x-axis (timestamp) change, how can I capture that as an input to another callback?

What I want to achieve, is plot-B displaying data based on the zoom in plot-A. When plot-A zooms in, plot-B automatically follows.

Note that plot-A and plot-B are using different dataset, with matching timestamps.

Sachin Dev Sharma · Answer 1 · 2020-08-01T08:09:21.663

Sample code for synchronizing the zoom level 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)])

@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')], # 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()

Your solution unfortunately overwrites the complete layout of the figure in the callback function. I have written an improved answer at https://stackoverflow.com/a/64891612/179014 . — asmaier, Nov 18 '20 at 10:58

score 4 · Answer 2 · answered Nov 18 '20 at 10:51

Here is an improved version of the callback based on the the answer from @Sachin Dev Sharma:

@app.callback([Output('graph2', 'figure')],
         [Input('graph', 'relayoutData')], # this triggers the event
         [State('graph2', 'figure')])
def zoom_event(relayout_data, *figures):
    outputs = []
    for fig in figures:
        try:
            fig['layout']["xaxis"]["range"] = [relayout_data['xaxis.range[0]'], relayout_data['xaxis.range[1]']]
            fig['layout']["xaxis"]["autorange"] = False
        except (KeyError, TypeError):
            fig['layout']["xaxis"]["autorange"] = True

        outputs.append(fig)

    return outputs

The advantage here is, that we don't overwrite the complete layout of the figure in the callback. We only overwrite the xaxis.range and xaxis.autorange property. Also this solution allows to set the zoom on multiple output figures by accepting multiple figure arguments (see *figures).

Your solution is more complete, but I don't quite understand the `*figures` trick. Isn't it always referring to graph2 figure State? For multiple figures, I use different approach, see my answer bellow. — Martin, Jul 01 '22 at 17:53

score 0 · Answer 3 · answered Jun 15 '19 at 22:55

0

The Dash docs have an answer for this here.

relayoutData

Data from latest relayout event which occurs when the user zooms or pans on the plot or other layout-level edits. Has the form {: } describing the changes made. Read-only.

Unfortunately, as a read-only prop, you will not be able to update the second graph to follow the zoom on the first one.

answered Jun 15 '19 at 22:55

coralvanda

6,431
2
15
25

Thanks, it's helpful to know relayoutData. I do think there are several ways to take that read-only data, and use it to update the other graph. Either through data, or axis properties of the graph? – mikkokotila Jun 16 '19 at 19:12
If there is, it is not something I am familiar with. – coralvanda Jun 16 '19 at 20:49

score 0 · Answer 4 · answered Jul 01 '22 at 17:59

Posting little bit different solution for multiple figures than @asmaier proposed


for p in ['graph1', 'graph2', 'add-your-graphs']:
    @callback(
        Output(p, 'figure'),
        [
            Input('graph', 'relayoutData'),
            State(p, 'figure')
        ]
    )
    def update_zoom(relayout_data, figure, component=p):
        if relayout_data is None:
            raise PreventUpdate

        try:
            figure['layout']["xaxis"]["range"] = [relayout_data['xaxis.range[0]'], relayout_data['xaxis.range[1]']]
            figure['layout']["xaxis"]["autorange"] = False
        except KeyError:
            raise PreventUpdate
        return figure

How to get zoom level in time series data as callback input in Dash

4 Answers4

Linked