# Add data to graph in callback

**URL:** <https://community.plotly.com/t/add-data-to-graph-in-callback/23387>\
**Category:** Dash Python\
**Created:** [May 13, 2019, 11:23am UTC](https://community.plotly.com/t/add-data-to-graph-in-callback/23387 "2019-05-13T11:23:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tracek](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tracek/32/4476_2.png) [@tracek](https://community.plotly.com/u/tracek)\
**Post date:** [May 13, 2019, 11:23am UTC](https://community.plotly.com/t/add-data-to-graph-in-callback/23387/1 "2019-05-13T11:23:41Z")

</div>

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](https://plot.ly/python/shapes/#highlighting-time-series-regions-with-rectangle-shapes)). Second option seems to be not possible, as explained in [this thread](https://community.plotly.com/t/is-it-possible-to-update-just-layout-not-whole-figure-of-graph-in-callback/8300/3).

Any ideas?

---

<div class="post-metadata">

**Author:** ![tracek](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tracek/32/4476_2.png) [@tracek](https://community.plotly.com/u/tracek)\
**Post date:** [May 13, 2019, 10:07pm UTC](https://community.plotly.com/t/add-data-to-graph-in-callback/23387/2 "2019-05-13T22:07:06Z")

</div>

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?](https://community.plotly.com/t/is-it-possible-to-update-just-layout-not-whole-figure-of-graph-in-callback/8300/9)

---

<div class="post-metadata">

**Author:** ![brad](https://avatars.discourse-cdn.com/v4/letter/b/59ef9b/32.png) [@brad](https://community.plotly.com/u/brad)\
**Post date:** [May 13, 2019, 10:26pm UTC](https://community.plotly.com/t/add-data-to-graph-in-callback/23387/3 "2019-05-13T22:26:33Z")

</div>

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](https://community.plotly.com/t/extend-or-append-data-instead-of-update/8898)

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.