How to Add uirevision Directly to Figure in Plotly Dash for Automatic Updates

Viewed 1239

I have a Plotly figure built in Python that updates automatically. I want to preserve dashboard zooms even with automatic updates. The documentation in Plotly says this can be done using the layout uirevision field, per the this community writeup. The docs give this as an example of the return dictionary:

 return {
        'data': data,
        'layout': {
            # `uirevsion` is where the magic happens
            # this key is tracked internally by `dcc.Graph`,
            # when it changes from one update to the next,
            # it resets all of the user-driven interactions
            # (like zooming, panning, clicking on legend items).
            # if it remains the same, then that user-driven UI state
            # doesn't change.
            # it can be equal to anything, the important thing is
            # to make sure that it changes when you want to reset the user
            # state.
            #
            # in this example, we *only* want to reset the user UI state
            # when the user has changed their dataset. That is:
            # - if they toggle on or off reference, don't reset the UI state
            # - if they change the color, then don't reset the UI state
            # so, `uirevsion` needs to change when the `dataset` changes:
            # this is easy to program, we'll just set `uirevision` to be the
            # `dataset` value itself.
            #
            # if we wanted the `uirevision` to change when we add the "reference"
            # line, then we could set this to be `'{}{}'.format(dataset, reference)`
            'uirevision': dataset,

            'legend': {'x': 0, 'y': 1}
        }
    }

However, my figure is built more like this:

import plotly.express as px

@app.callback(
    Output("graph", "figure"),
    [Input("interval-component", "n_intervals")])
def display_graph(n_intervals):
    # Logic for obtaining data/processing is not shown
    my_figure = px.line(my_data_frame, x=my_data_frame.index, y=['line_1', 'line_2'], 
    title='Some Title', template='plotly_dark')
    return my_figure

In other words, since I am not returning a dictionary, but a plotly express figure directly, how can I directly access the uirevision value so that UI changes from the user are preserved?

2 Answers

Use the figure dictionary, which can be accessed like so:

my_figure['layout']['uirevision'] = 'some_value'

This can also be used to access other useful aspects of the figure, such as changing the line color of a specific line entry:

my_figure['data'][2]['line']['color'] = '#FFFF00'

To see the other entry options, print out my_figure in a Python session.

Note: since the uirevision option isn't documented very well (at least, not in my searching online), I thought it worth posting this as an option.

Related