Dash apps 🤝

This documentation page describes how you can integrate plotly-resampler in a dash application.

Examples of dash apps with plotly-resampler can be found in the examples folder of the GitHub repository.

Registering callbacks in a new dash app

When you add a FigureResampler figure in a basic dash app, you should:

• Add a trace-updater component to the dash app layout.

  • It should have as gID the id of the dcc.Graph component that contains the FigureResampler figure.

• Register the FigureResampler figure its callbacks to the dash app.

  • The id of the dcc.Graph component that contains the FigureResampler figure and the id of the trace-updater component should be passed to the register_update_graph_callback method.

Code illustration:

# Construct the to-be resampled figure
fig = FigureResampler(px.line(...))

# Construct app & its layout
app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Graph(id="graph-id", figure=fig),
        trace_updater.TraceUpdater(id="trace-updater", gdID="graph-id"),
    ]
)

# Register the callback
fig.register_update_graph_callback(app, "graph-id", "trace-updater")

Warning

The above example serves as an illustration, but uses a global variable to store the FigureResampler instance; this is not a good practice. Ideally you should cache the FigureResampler per session on the server side. In our examples folder, we provide several dash app examples where we perform server side caching of such figures.

Tip

You can make the resampling faster by ensuring the TraceUpdater its sequentialUpdate argument is set to False.

Limitations

plotly_resampler relies on TraceUpdater to ensure that the updateData is sent efficiently to the front-end.

To enable dynamic-graph-construction, plotly-resampler supports pattern matching callbacks. This could only be achieved by performing partial id matching on the graph-div ID within the TraceUpdater component. This causes the following:

Attention

TraceUpdater will determine the html-graph-div by performing partial matching on the “id” property (using gdID) of all divs with classname="dash-graph". So if multiple same graph-div IDs are used, or one graph-div-ID is a subset of other(s), multiple eligible graph-divs will be found and a SyntaxError will be raised.

This can be circumvented by using an uuid-str for each graph-div, as done in this dynamic graph construction example.