Add data to graph in callback

Dash Python
1

Is it possible to add data to a Graph in a callback? That is, without redrawing whole figure from scratch.

In my use case plotting the main element on the graph is expensive - and doesn’t change much. The secondary element is highlighting of user-selected elements on the main graph. This is super-cheap and user will do this many time. Problem is, I don’t know how to the second without redrawing the first.

To highlight elements on the graph I could either add new data or change layout and shapes (much like here). Second option seems to be not possible, as explained in this thread.

Any ideas?

2 Likes
2

Found a solution to this: use State callback with figure. Explained here: Is it possible to update just `layout`, not whole `figure` of Graph in callback?

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