Extend (or append) data instead of update


I´m writting a live app that loads a large amount of data into the grahp. Currently I´m using the same method as in the examples.

app = dash.Dash(__name__)

app.layout = html.Div(
            interval=10*1000,  # in milliseconds

@app.callback(Output('update-plot', 'figure'),
              [Input('interval-component', 'n_intervals')])
def update_plot(n):
    # load data from db
    # create the taces
    return Figure(data= traces, layout = SOME_LAYOUT)

if __name__ == '__main__':

The problem here is that every 10 seconds all the data have to be reloaded and redraw and it takes some time. Another issue is that if have some zoomed area or some trace hidden I loose it after the update.

I there any way to just add the latest data to the traces? Something as Plotly.extendTraces.
i´m gessing something like this

@app.callback(Output('update-plot', 'figure'),
              [Input('interval-component', 'n_intervals')])
def update_plot(n):
    if n==0: # First update
        # load data from db
        # create the taces
       # return the Figure
       # append new data to the Figure



You could add a State to the callback that captures the figure property:

@app.callback(Output('update-plot', 'figure'), [Input('interval-component', 'n_intervals')], [State('update-plot', 'figure')])

This will give you access to the current value of figure, which you can get the traces data out of.


Great, this works. Now I have to figure out how to keep the same zoom after the update…

Thank you!

[EDIT] Here is solved