🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Dropdown Option for Tables and Graph

Hi!

I am trying to enable a dropdown with a view of a graph object table and a scatter plot. I am trying to do that with updatemenus, but the first render of the graph always have both plots.

Is there a way to fix this that I am not aware of?

Here is my example:

import plotly.graph_objects as go

values = ['A Scores', 'B Scores']
x = [100, 90, 80, 90]
y = [95, 85, 75, 95]

table = go.Table(
    header=dict(values=values),
    cells=dict(values=[x,y])
)

scatter = go.Scatter(x=x,y=y,mode='markers')

fig = go.Figure(data=[scatter,table])

# Add dropdown
fig.update_layout(
    updatemenus=[
        dict(
            active=0,
            buttons=list([
                dict(
                    args=["type", "scatter"],
                    label="Scatter",
                    method="restyle"
                ),
                dict(
                    args=["type", "table"],
                    label="Table",
                    method="restyle"
                )
            ]),
            showactive=True,
        ),
    ]
)

fig.show()


Also tried to use the update method instead of the restyle, but couldn’t get to display each graph separately (Scatter, Table) expect for the first render when it shows the scatter graph. Once click on Table dropdown, it shows both the table and the scatter plot on the same graph:

import plotly.graph_objects as go

values = ['A Scores', 'B Scores']
x = [100, 90, 80, 90]
y = [95, 85, 75, 95]

fig = go.Figure()

fig.add_trace(go.Scatter(x=x,
                     y=y,
                     mode='markers',
                    ))


fig.add_trace(go.Table(
    header=dict(values=values),
    cells=dict(values=[x,y]),
    visible= False,
))


# Add dropdown
fig.update_layout(
    updatemenus=[
        dict(
            active=0,
            buttons=list([
                dict(label="Scatter",
                     method="update",
                     args=[{"visible": [True, False]},
                           {"title": "Scatter"}]),
                dict(label="Table",
                     method="update",
                     args=[{"visible": [False, True]},
                           {"title": "Table"}]),
            ]),
        )
    ])


fig.show()