Black Lives Matter. Please consider donating to Black Girls Code today.

Using Transitions in Plotly Dash App

I have a chart that has scatter and bar chart each on one axis. I wanted to use transition to make the graph update smoother. when clicking buttons. When I apply transition, the bars and dots update fine, however, the x values which are categorical do not update but just stay the same. When I print out the list of values for the x axis that I pass into the traces for bar and scatter, the values are in the correct order, however, the chart in the dash app does not show them, they just stay the same. When I take the transitions out, the chart updates correctly, but of course not in a smooth way. Does anyone know why this could be the case?

hm, it sounds like it could be a bug! but it’s hard to say without seeing some code. could you create a simple, reproducible example and list your package version numbers? see How to Get your Questions Answered on the Plotly Forum

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:

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

Thank you! We’ll look into it and update this thread.

Reproduced in JS and logged: https://github.com/plotly/plotly.js/issues/5037

1 Like