Dynamically Switch Tabs with Plotly Click

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.


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.Tab(label="1", value="tab-1"),
                dcc.Tab(label="2", value="tab-2"),
            colors={"border": "white", "primary": "gold", "background": "cornsilk"},

@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"

    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__":

Hope this helps!

1 Like

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:

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

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’

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