Sharing examples of partial update & allow_duplicate=True from Dash 2.9.2!

Dash Python
,
6

Hi!

I wanted to add another example of using partial updates.

Imagine you want to update the markers of all traces in your figure. You could use the following:

import dash
from dash import Input, Output, html, dcc, Patch
import plotly.graph_objects as go
import numpy as np
import random

# generate some data
TRACES = 7
DATAPOINTS = 10

# create figure
figure = go.Figure(layout={'width': 1000, 'height': 800})
for idx in range(TRACES):
    figure.add_scatter(
        x=np.arange(DATAPOINTS),
        y=np.arange(DATAPOINTS) + 10*idx,
        mode='markers',
        marker={'color': 'crimson', 'size': 10},
        name=idx
    )

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.Div(
            [
                html.Button(id='btn', children='reset')
            ],
            style={'width': '10%'}
        ),
        html.Div([
            dcc.Graph(
                id='graph_post',
                figure=figure,
            )
        ]),
    ]
)


@app.callback(
    Output('graph_post', 'figure'),
    Input('btn', 'n_clicks'),
    prevent_initial_call=True
)
def update(_):
    # Creating a Patch object
    patched_figure = Patch()

    # new color for markers
    color = random.choice(['crimson', 'darkgreen', 'black', 'yellow', 'blue', 'orange'])

    for k in range(20):     # note that there are only 7 traces in the figure
        patched_figure["data"][k].update({"marker": {'color': color, 'size': 10}})
    return patched_figure


if __name__ == '__main__':
    app.run(debug=True, port=8051)

There are two drawbacks here:

  • the range has to be greater than the number of traces in the figure
  • the update process gets slower with increasing range
2 Likes