Add data to graph in callback

Dash Python
3

FYI, the solution you reference does save time in the sense that you don’t need to recompute each trace, but will still require the app to redraw the entire trace (sends the raw data in callback every time).

If you’re open to the first option (add new data), you might consider a callback that uses extendData instead of figure. Take a look at this thread, discussing the extendData property of dcc.Graph: Extend (or append) data instead of update

Takeaways:

  1. The Plotly.extendTraces() function allows new data to be added to traces without needing to redraw everything via Plotly.react().

  2. dcc.Graph.extendData allows you to extend data for existing traces without redrawing everything. However, it doesn’t allow you to add new traces, and it can only extend a single type of trace at a time.
    In this case, I would initialize the figure with 2 traces (let’s call them “data” and “highlight”), and extend the highlight trace based on your user selections … sounds like you already have the user selection part figured out. The API for this is written to match plotly.extendTraces()

  3. DashExtendableGraph is a custom component forked from dcc.Graph that offers some more flexibility. It can extend existing and/or add new traces to existing figures. In this case, you could choose to either (1) create a new trace for every highlight, or (2) create [and then extend] new points to a single “highlight” trace. The API here works more similarly to what you would attach to the figure['data'] prop of dcc.Graph.

1 Like