why zoom doesn't work in Dash plotly with my line graph

Question

I am plotting a line graph in the Dash app this graph update frequently let's say every 1 second, But when I am trying to zoom in it immediately gets back to the initial view. What am I doing wrong? I am new to Dash and web UI so any help will be of great help to me, Thank you in advance.

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import random
import plotly.graph_objs as go
from collections import deque

X = deque()
X.append(1)
Y = deque()
Y.append(1)


app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Graph(id='live-graph', animate=True),
        dcc.Interval(
            id='graph-update',
            interval=1*1000
        ),
    ]
)

@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'n_intervals')])
def update_graph_scatter(input_data):
    X.append(X[-1]+1)
    Y.append(Y[-1]+Y[-1]*random.uniform(-0.1,0.1))

    data = plotly.graph_objs.Scatter(
            x=list(X),
            y=list(Y),
            name='Scatter',
            mode= 'lines+markers'
            )

    return {'data': [data],'layout' : go.Layout(
    xaxis=dict(range=[0, max(X) + 1]),
    yaxis=dict(range=[min(Y) - 0.15, max(Y) + 1]),
    title="Plot Title",
    xaxis_title="x Axis Title",
    yaxis_title="y Axis Title",
    font=dict(
        family="Courier New, monospace",
        size=20,
        color="#7f7f7f"
    )
)}


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

Answer 1

This is because I was rendering the whole graph every time, which in turn reset the view of the graph even though you zoom in/out. The solution for this is to use an extendable graph. Dash plotly has this support visit this Link to know more about it. .