This is a simplified example I wrote to find the source of the issue. This graph has two traces with two different y axes and the same x axis. The callback rescales the axes to fit everything, but breaks when you set animate=True, at which point one of the y axes ceases to update. Any help is appreciated!
from dash.dependencies import Output, Event
import dash_core_components as dcc
import dash_html_components as html
import random
import plotly.graph_objs as go
from collections import deque
X = deque(maxlen=50)
X.append(1)
Y = deque(maxlen=50)
Y.append(100)
Y2 = deque(maxlen=50)
Y2.append(100)
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'), events=[Event('graph-update', 'interval')])
def update_graph_scatter():
X.append(X[-1] + 1)
Y.append(Y[-1] + random.uniform(-5, 10))
Y2.append(Y2[-1] + random.uniform(-50, 100))
data = go.Scatter(
x=list(X),
y=list(Y),
name='Scatter',
mode='lines+markers',
yaxis='y'
)
data2 = go.Scatter(
x=list(X),
y=list(Y2),
name='Scatter2',
mode='lines+markers',
yaxis='y2'
)
layout = go.Layout(
xaxis=dict(
range=[min(X), max(X)],
),
yaxis=dict(
range=[min(Y), max(Y)],
title='y'
),
yaxis2=dict(
range=[min(Y2), max(Y2)],
side='right',
overlaying='y',
title='y2'
)
)
return {'data': [data, data2], 'layout': layout}
if __name__ == '__main__':
app.run_server(debug=True)
This is a simplified example I wrote to find the source of the issue. This graph has two traces with two different y axes and the same x axis. The callback rescales the axes to fit everything, but breaks when you set animate=True, at which point one of the y axes ceases to update. Any help is appreciated!