✊🏿 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!

Toggle between graphs and reset animation frame to 0

Hi,

I am new to Dash and I am trying to implement something very similar to this. (section: Animated figures in Dash, see below for code snippet from link), but instead of dcc.RadioItems, I am using dcc.dropdown.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

df = px.data.gapminder()
animations = {
    'Scatter': px.scatter(
        df, x="gdpPercap", y="lifeExp", animation_frame="year", 
        animation_group="country", size="pop", color="continent", 
        hover_name="country", log_x=True, size_max=55, 
        range_x=[100,100000], range_y=[25,90]),
    'Bar': px.bar(
        df, x="continent", y="pop", color="continent", 
        animation_frame="year", animation_group="country", 
        range_y=[0,4000000000]),
}

app = dash.Dash(__name__)

app.layout = html.Div([
    html.P("Select an animation:"),
    dcc.RadioItems(
        id='selection',
        options=[{'label': x, 'value': x} for x in animations],
        value='Scatter'
    ),
    dcc.Graph(id="graph"),
])

However, if you select the first graph (scatter), press play, then pause it during the mid animation, and then switch to the bar graph, the animation resets to 1952 as expected. However, when you press play, it continues from where you paused in the scatter plot.

For my purposes, I have two different graphs with two different scales, and I would like to have it reset to 0 and start at 0 if a user toggles between the graphs.

Is there any functionality built in to get around this?

Thanks!