# Is it possible to add traces to a dcc.Graph dinamically?

**URL:** <https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430>\
**Category:** Dash Python\
**Created:** [May 14, 2020, 3:42pm UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430 "2020-05-14T15:42:48Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![lm97](https://avatars.discourse-cdn.com/v4/letter/l/a183cd/32.png) [@lm97](https://community.plotly.com/u/lm97)\
**Post date:** [May 14, 2020, 3:42pm UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/1 "2020-05-14T15:42:48Z")

</div>

I will try to explain it clearly.

I am performing a dash application, and I want to dinamically add new traces to a scatter plot. Here is an example of the code.

app = dash.Dash( **name** , external\_stylesheets=[dbc.themes.BOOTSTRAP])  
app.scripts.config.serve\_locally = True  
app.config[‘suppress\_callback\_exceptions’] = True

app.layout = html.Div([  
html.Div([  
dcc.Dropdown(id=‘scatterXVar’, value=None, style={‘display’: ‘none’}),  
dcc.Dropdown(id=‘scatterYVar’, value=None, style={‘display’: ‘none’}),  
], id=‘scatterVariables’),

html.Button(‘Add Trace’, id=‘addTrace’)  
)]),

dcc.Graph(id=‘scatterGraph’)

I have two dropdowns in the layout, one corresponds to the X-Variable I want to scatter, and the other one to the Y-Variable.

The idea is, once I have selected which two variables I wanna scatter, whenever I click the button, a trace is added to the graph. My problem is that after I scatter the first trace, whenever I want to add another trace to the graph, the previous traces are erased, and it only adds the new trace, and what I want is to preserve all the traces together.

Here is my callback:

@app.callback(Output(‘scatterGraph’, ‘figure’),  
[Input(‘addTrace’, ‘n\_clicks’)],  
[State(‘scatterXVar’, ‘value’),  
State(‘scatterYVar’, ‘value’)])  
def sccatterGr(nclicks, scatterXval, scatterYval): # da):  
if scatterXval is None or scatterYval is None or scatterXval == or scatterYval == :  
return {}  
else:  
fig = go.Figure()  
fig.add\_trace(go.Scatter(  
x=df[scatterXval.encode(‘utf-8’)],  
y=df[scatterYval.encode(‘utf-8’)],  
mode=‘markers’,  
marker={  
‘size’: 15,  
‘opacity’: 0.5,  
‘line’: {‘width’: 0.5, ‘color’: ‘white’}  
}))  
return fig

Please, I need help so badly.

---

<div class="post-metadata">

**Author:** ![lm97](https://avatars.discourse-cdn.com/v4/letter/l/a183cd/32.png) [@lm97](https://community.plotly.com/u/lm97)\
**Post date:** [May 15, 2020, 8:15am UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/2 "2020-05-15T08:15:43Z")

</div>

I need help please, it’s important. Someone who let me know if it is possible? Thanks

---

<div class="post-metadata">

**Author:** ![bicachu](https://avatars.discourse-cdn.com/v4/letter/b/43a26b/32.png) [@bicachu](https://community.plotly.com/u/bicachu)\
**Post date:** [May 17, 2020, 6:24pm UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/3 "2020-05-17T18:24:37Z")

</div>

hmm… it seems like what you are trying to do is store the history or traces for a figure so that with each incremental drop down value pair passed in, the graph is updated with the new trace as well as all the previous traces that were generated.

The problem with your current code is that each time the callback is triggered, you are initializing a new empty figure with `fig = go.Figure()` which is why you are only getting the newly added trace.

I’m not sure how to you can somehow append the traces to a growing list of traces that you can reference each time a callback is generated. I don’t know if this would work but have you tried to **not initialize** a new empty `Figure()` in your callback each time.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [May 17, 2020, 11:06pm UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/4 "2020-05-17T23:06:22Z")

</div>

also try passing in figure as State and then mutating it

---

<div class="post-metadata">

**Author:** ![lm97](https://avatars.discourse-cdn.com/v4/letter/l/a183cd/32.png) [@lm97](https://community.plotly.com/u/lm97)\
**Post date:** [May 18, 2020, 7:45am UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/5 "2020-05-18T07:45:56Z")

</div>

Thanks both! I found a solution a few days ago, and it is the one that @chriddyp comments. Passing the figure as State and mutating whenever the callback is generated.

---

<div class="post-metadata">

**Author:** ![aboyher](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@aboyher](https://community.plotly.com/u/aboyher)\
**Post date:** [May 3, 2021, 3:14pm UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/6 "2021-05-03T15:14:58Z")

</div>

I know it’s a year later but can you link the solution you found? What do you mean by “mutate”?

---

<div class="post-metadata">

**Author:** ![riskfree](https://avatars.discourse-cdn.com/v4/letter/r/59ef9b/32.png) [@riskfree](https://community.plotly.com/u/riskfree)\
**Post date:** [June 10, 2021, 8:26pm UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/7 "2021-06-10T20:26:06Z")

</div>

Interested to see the solution as well

---

<div class="post-metadata">

**Author:** ![riskfree](https://avatars.discourse-cdn.com/v4/letter/r/59ef9b/32.png) [@riskfree](https://community.plotly.com/u/riskfree)\
**Post date:** [June 10, 2021, 8:39pm UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/8 "2021-06-10T20:39:35Z")

</div>

@chriddyp can you please explain your answer in more detail? I’m having the same issue. Thank you.

---

<div class="post-metadata">

**Author:** ![Parakiwi](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/parakiwi/32/13486_2.png) [@Parakiwi](https://community.plotly.com/u/Parakiwi)\
**Post date:** [June 11, 2021, 1:59am UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/9 "2021-06-11T01:59:50Z")

</div>

I could be wrong, but if you add `State(‘scatterGraph’, ‘figure’)` to the callback, then the function can take in the figure and add to it as required with `your_variable.add_trace()`  
This is the same as taking it as `Input(‘scatterGraph’, ‘figure’)` except it is not trigerred by a change in the element, therefore avoiding circular callbacks.

---

<div class="post-metadata">

**Author:** ![aboyher](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@aboyher](https://community.plotly.com/u/aboyher)\
**Post date:** [June 14, 2021, 3:18pm UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/10 "2021-06-14T15:18:20Z")

</div>

This is what I did. You can pass the figure as a State, then either convert it into a figure object by passing the figure data into graph\_objects.Figure(), or append the new trace to figure[‘data’] as a dictionary.

---

<div class="post-metadata">

**Author:** ![Parakiwi](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/parakiwi/32/13486_2.png) [@Parakiwi](https://community.plotly.com/u/Parakiwi)\
**Post date:** [June 15, 2021, 3:51am UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/11 "2021-06-15T03:51:45Z")

</div>

@riskfree Here is some sample code that might help you with taking in an object as `State` and acting upon it, as i think @chriddyp was alluding to. In this case, each time you click the button a random point is added to the current figure:

```auto
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objects as go
import random

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Graph(
        id='graph',
        figure=go.Figure()
    ),
    html.Button(
        id='button',
        name="Add Random",
        children="Add Random",
    ),
])

@app.callback(
    Output('graph', 'figure'),
    Input('button', 'n_clicks'),
    State('graph', 'figure'),
)
def update_figure(dummy, fig):
    # print(fig)
    fig = go.Figure(fig)
    fig.add_trace(go.Scatter(x=[random.random()], y=[random.random()]))
    return fig

if __name__ == ' __main__':
    app.run_server(debug=True)

```

Hope this helps!

---

<div class="post-metadata">

**Author:** ![riskfree](https://avatars.discourse-cdn.com/v4/letter/r/59ef9b/32.png) [@riskfree](https://community.plotly.com/u/riskfree)\
**Post date:** [June 15, 2021, 4:59am UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/12 "2021-06-15T04:59:35Z")

</div>

@Parakiwi thank you. I’m trying to add a Scattermapbox trace to my Choroplethmapbox by using `fig.add_trace(go.Scattermapbox())` and it still takes quite a long time for the scatter point to show (2-3 seconds). It’s only one point when the user clicks on the map. I’m not sure what is causing this delay and how to mitigate it. Here is the code if you may be able to help. The choropleth file is approx 4mb after minifying, but I don’t think it matters if the callback is in fact not redrawing the trace.

```auto
@app.callback(

    Output("graph", "figure"),

    [Input("graph", "clickData")],

    [State("graph", "figure")],

)

def update_figure(clickData, graph):

    if clickData is not None:

        location = clickData["points"][0]["location"]
 
        a = go.Figure(graph)

        a.add_trace(

            go.Scattermapbox(

                lat=center_file[center_file["geoid"] == location]["lat"],

                lon=center_file[center_file["geoid"] == location]["lon"],

                mode="markers",

                marker=dict(

                    size=15,

                    opacity=0.85,

                    color="red",

                ),

            )

        )

        a.update_layout(margin=dict(t=0, l=0, b=0, r=0))

    else:

        a = initial_graph()

    return a

```

---

<div class="post-metadata">

**Author:** ![riskfree](https://avatars.discourse-cdn.com/v4/letter/r/59ef9b/32.png) [@riskfree](https://community.plotly.com/u/riskfree)\
**Post date:** [June 15, 2021, 5:01am UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/13 "2021-06-15T05:01:16Z")

</div>

@aboyher did you see a big jump in performance after doing so? Would you be able to share your code?

---

<div class="post-metadata">

**Author:** ![Parakiwi](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/parakiwi/32/13486_2.png) [@Parakiwi](https://community.plotly.com/u/Parakiwi)\
**Post date:** [June 15, 2021, 9:33pm UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/14 "2021-06-15T21:33:07Z")

</div>

Will probably need to see some more of your code to try and help with that mate, depending on how the layout is set up and your `initial_graph()` function

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [June 20, 2021, 2:33am UTC](https://community.plotly.com/t/is-it-possible-to-add-traces-to-a-dcc-graph-dinamically/39430/15 "2021-06-20T02:33:26Z")

</div>

> [@Parakiwi](#):
>
> Here is some sample code that might help you with taking in an object as `State` and acting upon it, as i think @chriddyp was alluding to.

Thanks @Parakiwi - This is it exactly 😌