Dropdown Option for Tables and Graph

📊 Plotly Python
1

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()

image
image1348×278 10.5 KB

2

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()