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.
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
Plotly.extendTraces() function allows new data to be added to traces without needing to redraw everything via
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
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.