Using Transitions in Plotly Dash App

Dash Python
3

Thanks for answering. I was able to reproduce it. A graph gets update upon clicking buttons.

I created dummy data in the following manner:

dummy_df = pd.DataFrame(np.random.randint(0,100,size=(10, 5)), columns=["name", "param1", "param2", "param3", "param4"])

Here is the div in the layout:

html.Div([
        html.Button('Param 1', id='btn1', n_clicks=0),
        html.Button('Param 2', id='btn2', n_clicks=0),
        html.Button('Param 3', id='btn3', n_clicks=0),
        html.Button('Param 4', id='btn4', n_clicks=0),
        dcc.Graph(
            id="dummy-graph",
        )
 ])

And the callback:

@app.callback(
    Output("dummy-graph", "figure"),
    [Input("btn1", "n_clicks"),
     Input("btn2", "n_clicks"),
     Input("btn3", "n_clicks"),
     Input("btn4", "n_clicks"),]
)
def update_dummy(btn1, btn2, btn3, btn4):

    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]

    plot_df=dummy_df.copy()

    if "btn1" in changed_id:
        plot_df.sort_values(by="param1", ascending=False, inplace=True)

    elif "btn2" in changed_id:
        plot_df.sort_values(by="param2", ascending=False, inplace=True)

    elif "btn3" in changed_id:
        plot_df.sort_values(by="param3", ascending=True, inplace=True)

    elif "btn4" in changed_id:
        plot_df.sort_values(by="param4", ascending=False, inplace=True)

    example_fig = make_subplots(specs=[[{"secondary_y": True}]])

    example_fig.add_trace(
        go.Bar(name="Param1", x=plot_df["name"], y=plot_df['param1']),
        secondary_y = False
    )

    example_fig.add_trace(
        go.Bar(name="Param2", x=plot_df['name'], y=plot_df['param2']),
        secondary_y = False
    )

    example_fig.add_trace(
        go.Scatter(name="Param3", mode="markers", x=plot_df['name'], y=plot_df['param3']),
        secondary_y = True
    )

    example_fig.add_trace(
        go.Scatter(name="Param4", mode="markers", x=plot_df['name'], y=plot_df['param4']),
        secondary_y = True
    )

    example_fig.update_layout(
        template="plotly_white",
        xaxis={"type": 'category'},
        transition={
                'duration': 500,
                'easing': 'cubic-in-out'
        },
        hovermode="x unified",
    )

    return example_fig

In the hovermode one can see that the hoverinfo and the xaxis value do not match:

image
image1891×471 22.4 KB

Without the transition, the graph updates correctly. I hope this helps.

I am using the following:

Dash version: 1.13.4
Plotly version: 4.8.1
Windows Operating System