@chriddyp do you have an example of getting a trend line to draw itself from left to right? I’m passing the following figure and the axis seem to animate but then the whole lines just get plotted immediately. I am just looking to have them transition on their initial load, not necessarily going to be linking a dropdown or any buttons to this chart… I just like the look of it animating better than the dcc.Loading spinners 
…Also I think there may be a bug with this when using custom tickvals, and I also seem to still be getting the warm up artifact before the transitions start. Appreciate any help!
{
'data': [
go.Scatter(
name='All Time',
x=best_interval_df.index,
y=best_interval_df['best_power'],
mode='lines',
text=['Interval: {:%H:%M:%S} - {:%H:%M:%S}<br>Best: {:%Y-%m-%d}<br>{}: {:.0f}'.format(
pd.to_datetime(best_interval_df.loc[i]['time_interval']) - timedelta(seconds=i),
pd.to_datetime(best_interval_df.loc[i]['time_interval']),
best_interval_df.loc[i]['timestamp'], 'Power', best_interval_df.loc[i]['best_power'])
for i in best_interval_df.index],
customdata=[
'{}_{}_{}'.format(best_interval_df.loc[x]['activity_id'],
best_interval_df.loc[x]['time'].astype('int'),
int(x))
for x in
best_interval_df.index], # add fields to text so data can go through clickData
hoverinfo='text+x',
line={'shape': 'spline', 'color': teal},
),
go.Scatter(
name='Current Year ',
x=cy_best_interval_df.index,
y=cy_best_interval_df['best_power'],
mode='lines',
# text=['{:.0f}'.format(cy_best_interval_df.loc[i]['best_power']) for i in
# cy_best_interval_df.index],
text=['Interval: {:%H:%M:%S} - {:%H:%M:%S}<br>Best: {:%Y-%m-%d}<br>{}: {:.0f}'.format(
pd.to_datetime(cy_best_interval_df.loc[i]['time_interval']) - timedelta(seconds=i),
pd.to_datetime(cy_best_interval_df.loc[i]['time_interval']),
cy_best_interval_df.loc[i]['timestamp'], 'Power',
cy_best_interval_df.loc[i]['best_power'])
for i in cy_best_interval_df.index],
hoverinfo='text+x',
line={'shape': 'spline', 'color': light_blue},
),
go.Scatter(
name='Current Month',
x=cm_best_interval_df.index,
y=cm_best_interval_df['best_power'],
mode='lines',
# text=['{:.0f}'.format(cy_best_interval_df.loc[i]['best_power']) for i in
# cy_best_interval_df.index],
text=['Interval: {:%H:%M:%S} - {:%H:%M:%S}<br>Best: {:%Y-%m-%d}<br>{}: {:.0f}'.format(
pd.to_datetime(cm_best_interval_df.loc[i]['time_interval']) - timedelta(seconds=i),
pd.to_datetime(cm_best_interval_df.loc[i]['time_interval']),
cm_best_interval_df.loc[i]['timestamp'], 'Power',
cm_best_interval_df.loc[i]['best_power'])
for i in cm_best_interval_df.index],
hoverinfo='text+x',
line={'shape': 'spline', 'color': dark_blue},
),
go.Scatter(
name='Last Workout',
x=recent_best_interval_df.index,
y=recent_best_interval_df['best_power'],
mode='lines',
# text=['{:.0f}'.format(cy_best_interval_df.loc[i]['best_power']) for i in
# cy_best_interval_df.index],
text=['Interval: {:%H:%M:%S} - {:%H:%M:%S}<br>Best: {:%Y-%m-%d}<br>{}: {:.0f}'.format(
pd.to_datetime(recent_best_interval_df.loc[i]['time_interval']) - timedelta(
seconds=i),
pd.to_datetime(recent_best_interval_df.loc[i]['time_interval']),
recent_best_interval_df.loc[i]['timestamp'], 'Power',
recent_best_interval_df.loc[i]['best_power'])
for i in recent_best_interval_df.index],
hoverinfo='text+x',
line={'shape': 'spline', 'color': white},
),
],
'layout': go.Layout(
transition=dict(duration=500, easing='cubic-in-out'),
plot_bgcolor='rgb(66, 66, 66)', # plot bg color
paper_bgcolor='rgb(66, 66, 66)', # margin bg color
font=dict(
color='rgb(220,220,220)'
),
xaxis=dict(
showgrid=False,
# tickformat="%H:%M:%S",
# range=[best_interval_df.index.min(),best_interval_df.index.max()],
range=[np.log10(best_interval_df.index.min()), np.log10(best_interval_df.index.max())],
type='log',
tickvals=[1, 2, 5, 10, 30, 60, 120, 5 * 60, 10 * 60, 20 * 60, 60 * 60, 60 * 90],
ticktext=['1s', '2s', '5s', '10s', '30s', '1m',
'2m', '5m', '10m', '20m', '60m', '90m'],
),
yaxis=dict(
showgrid=True,
range=[best_interval_df['best_power'].min(), best_interval_df['best_power'].max()],
gridcolor='rgb(73, 73, 73)',
),
margin={'l': 40, 'b': 40, 't': 0, 'r': 40},
legend={'x': .5, 'y': 1, 'xanchor': 'center', 'orientation': 'h',
'traceorder': 'normal', 'bgcolor': 'rgba(127, 127, 127, 0)'},
autosize=True,
)
}