Time scale on x-axis bounces back and forth after navigating to other browser tabs

📊 Plotly Python
1

I have a plotly figure which shows exchange rates developing over time. The starting point in time is fixed and the chart updates with new data points every 10 seconds. When I navigate away from the browser tab which shows the chart and return to it a few minutes later the x-axis with the time line and the lines plotted bounce back and forth. Sometimes the chart returns to normal behaviour after about 30 seconds, but if I was away from the page for a long time it doesn’t. This happens in chrome and edge, there are no bugs in my code and I have updated to the latest version of plotly 5.2.1. The relevant function follows:

def make_xchg_chart(p):

    fig = go.Figure([go.Scatter(x=p['stampdt'], y=p['eth_usdtzar'], name='ETH')])
    fig.add_trace(go.Scatter(x=p['stampdt'], y=p['btc_usdtzar'], line=dict(color='#ee4455'), name='BTC'))

    fig.update_layout(paper_bgcolor='#222222', plot_bgcolor='#303030', xaxis_showgrid=False, title_text='USDTZAR', title_font_family='Arial', title_font_size=15, title_font_color='#fff', title_x=0, 
    title_xanchor='left', title_xref='paper', showlegend=False, margin=dict(l=0,r=0,b=50,t=50), width=1070, height=250)
    fig.update_yaxes(side='right', gridwidth=1, gridcolor='#434343', zerolinewidth=1, showline=True, linewidth=1, linecolor='#434343', mirror=True, color='#fff')
    fig.update_xaxes(showline=True, linewidth=1, linecolor='#434343', mirror=True, color='#999999')
    
    start = p['stampdt'].iloc[0]
    end = p['stampdt'].iloc[-1] + timedelta(minutes=5)
    min_e = p[['eth_usdtzar']].min().iloc[0]
    min_b = p[['btc_usdtzar']].min().iloc[0]
    max_e = p[['eth_usdtzar']].max().iloc[0]
    max_b = p[['btc_usdtzar']].max().iloc[0]

    if min_e <= min_b:
        min_c = min_e
    else:
        min_c = min_b
    
    if max_e >= max_b:
        max_c = max_e
    else:
        max_c = max_b

    fig.update_layout(xaxis=dict(range=[start, end]))
    fig.update_layout(yaxis=dict(range=[min_c - 0.01, max_c + 0.01]))

    return dcc.Graph(figure=fig, animate=True)

dataframe p has the following data format:

stampdt                            eth_usdtzar  btc_usdtzar
115 2021-08-20 13:07:00.000000        15.65        15.70
116 2021-08-20 13:08:00.000000        15.64        15.69
117 2021-08-20 13:09:00.000000        15.63        15.68
118 2021-08-20 13:10:00.000000        15.64        15.70
119 2021-08-20 13:11:12.304742        15.65        15.68

I use an interval control to update the charts data every 10 seconds:

itrl = dcc.Interval(id='xchg_itrl', interval=10000, n_intervals=0, max_intervals=-1)

Which in turn runs the following callback:

@app.callback(Output('div_xchg', 'children'), Input('xchg_itrl', 'n_intervals'))
def update_usdtzar_chart(n):

    return al.make_xchg_chart(dt.get_recent_usdtzar(120))

dt.get_recent_usdtzar makes api calls and does some calculations. I put breakpoints all over the show but the data being generated is correct and the chart runs flawlessly as long as I have the browser tab showing the chart open on one of my screens. I think there’s some bug or some setting in the background which isn’t in my Python code. This exact problem happens on every computer at work and it happens whether the python app is hosted live on the server or locally in dev with debug True or False. It also happens with other charts using a similar logic but in totally different apps with different data, but always with dataframes feeding the plotly figures and datetime fields on the x-axis.

2

I found the problem, it’s this line:

return dcc.Graph(figure=fig, animate=True)

After removing animate=True the chart behaves as expected.