Dynamically Switch Tabs with Plotly Click

Dash Python
1

Wondering if it is possible to auto-switch tabs in Dash when a point is clicked in Plotly. I am able to auto-populate a dropdown with the point’s clicked data in the second tab, but can’t quite figure out how to directly navigate to tab 2 when the point is clicked.

2

Hi,

Welcome to the community! :slight_smile:

I believe it should be enough to use a second Output in the callback, where you return the “value” prop of the tabs that you want to switch to. The code below is a slightly modified version of the last example in the docs, where the tab toggling is triggered by a button:

from dash import Dash, dcc, html
from dash.dependencies import Input, Output

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Button("Button", id="button"),
        dcc.Tabs(
            id="tabs-styled-with-props",
            value="tab-1",
            children=[
                dcc.Tab(label="1", value="tab-1"),
                dcc.Tab(label="2", value="tab-2"),
            ],
            colors={"border": "white", "primary": "gold", "background": "cornsilk"},
        ),
        html.Div(id="tabs-content-props"),
    ]
)


@app.callback(Output("tabs-styled-with-props", "value"), Input("button", "n_clicks"))
def update_output(n_clicks):
    if n_clicks is None:
        return "tab-1"

    return "tab-2" if n_clicks % 2 else "tab-1"


@app.callback(
    Output("tabs-content-props", "children"), Input("tabs-styled-with-props", "value")
)
def render_content(tab):
    if tab == "tab-1":
        return html.Div([html.H3("Tab content 1")])
    elif tab == "tab-2":
        return html.Div([html.H3("Tab content 2")])


if __name__ == "__main__":
    app.run_server(debug=True)

Hope this helps!

1 Like
3

Thank you! I’m confused on how this transfers to a Plotly click. Is it technically a button?

I’m currently trying to use the “active_tab” prop of the tabs. What I am trying to work with right now:

app.callback(
    Output('tabs', 'active_tab'),
    [Input('machine_time_plot', 'clickData')]
)
def go_to_tab_2(clickData):
    if clickData:
        return 'tab-2'
    return 'tab-1'
4

got it! I was able to have 2 outputs when a Plotly datapoint is clicked and simply returned the property value for the tabs- ‘2’

@app.callback(
    Output("dropdown", "value"),
    Output('tabs','value'),
    Input("machine_time_plot", "clickData"),
)
def click(clickData):
     nc = clickData["points"][0]["customdata"][2]
     return nc, '2'
1 Like