✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Animated data replacing static data in other subplots

I’m trying to make a simple dashboard using only plotly. This dashboard has two subplots side-by-side with two, different sets of x/y axes. On one side, there is “static data” and on the other, all the data is animated. When I play the animation, however, the static data disappears while the animated data does its animation. The data isn’t gone completely, however. If you pause the animation and re-adjust one of the plots (click-drag or double-clicking), then the static data re-appears.

I’ve made a pretty basic example below to demonstrate the issue.

import plotly.graph_objects as go

static_data = dict(
    x=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    y=[3, 1, 4, 1, 5, 9, 2, 6, 5, 3,]
)

data = [dict(), go.Scatter(
    x=static_data['x'], y=static_data['y'], xaxis='x2', yaxis='y2', showlegend=False
)]

frames = []
for i in range(100):
    frames.append(
        dict(
            name=str(i),
            traces=[0],
            data=[go.Scatter(
                x=[i], y=[i], showlegend=False, mode='markers', xaxis='x1', yaxis='y1'
            )]
        )
    )

layout = dict(
    xaxis=dict(domain=[0, 0.475], title='x-axis1', range=[0, 100]),
    yaxis=dict(title='y-axis1', range=[0, 100], anchor='x1'),
    xaxis2=dict(domain=[0.525, 1.0], title='x-axis2', range=[0, 11]),
    yaxis2=dict(title='y-axis2', range=[0, 10], anchor='x2'),
    updatemenus=[dict(
            type='buttons',
            direction='right',
            x=0.0,
            y=0.0,
            xanchor='left',
            yanchor='top',
            buttons=[dict(
                label='Play',
                method='animate',
                args=[None,
                      dict(
                          frame={'duration': 0, 'redraw': False},
                          transition=dict(duration=0),
                          fromcurrent=True,
                          mode='immediate'
                      )]
            ),
                dict(
                    label='Pause',
                    method='animate',
                    args=[[None],
                          dict(
                              frame={'duration': 0, 'redraw': False},
                              transition=dict(duration=0),
                              fromcurrent=True,
                              mode='immediate'
                          )]
                )]
        )]
)

fig = go.Figure(data=data, layout=layout, frames=frames)
fig.show()

I can also include a gif demonstrating the dashboard “eating” the data in about an hour if some want to see that happen without running the above code. Any guidance or suggestions are greatly appreciated! Thanks!