Most markers not visible unless chart is double-clicked with plotly.express `animation_frame`

Creating an animated plotly.express chart using animation_frame works fine, but I realized that when selecting a certain value on the slider, most markers are not visible. It all works fine when I double click on the chart.

plotly==4.0.0 pandas==0.24.2

import random
import plotly.express as xp
import pandas as pd
import plotly

df = pd.DataFrame({
    'date': pd.date_range('2019-01-01', '2019-12-31'),
    'number': random.choices(range(1,200), k=365)
    
})
df['month'] = df['date'].dt.month
df.head()

	date	      number	 month
0	2019-01-01	152	1
1	2019-01-02	127	1
2	2019-01-03	39	1
3	2019-01-04	195	1
4	2019-01-05	69	1

xp.scatter(df, x='date', y='number', animation_frame='month')

Selecting month 6 gives the following empty chart:

After double-clicking the chart it looks fine:

Any idea what might be causing that? Thanks!

[nicolaskruchten]

Today Plotly.js auto-ranges to the first frame, but in the near future it will actually transition ranges as well as data, and/or internally auto-range all frames. I don’t want to code this into the Python layer at this time as undoing that to defer to the JS layer would cause unnecessary churn.

Today the recommendation is to manually set the ranges on your animations to ensure things look good in all frames.

[nicolaskruchten]

The issue is that when using animation_frames, the axis range is computed using only the initial frame (at the moment) meaning that you must manually set the x and y range to include all of the data when animating, in order for data to be visible in all frames.

This is unfortunate, and we’ll try to automate it in the future 😃