How to add two dropdownmenus is plotly plot (not plotly dash)

Question

Hi I am able to add one dropdown in plotly graph plot. But wondering how one can add two and more dropdown to update accordingly.

This is code and has three subplots. By selecting from dropdown plots will update. I just want to add one more dropdown which can change height or width of plot.

Note: Without plotly-dash

import plotly.graph_objs as go
from plotly import subplots 
trace0 = go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode="lines+markers")
trace1 = go.Scatter(x=[1, 2, 3], y=[5, 4, 6], mode="lines+markers")
trace2 = go.Scatter(x=[1, 2, 3], y=[6, 5, 4], mode="lines+markers")
fig = subplots.make_subplots(rows=3,cols=1,shared_xaxes=True,horizontal_spacing=0.5)
fig.add_trace(trace0, 1, 1)
fig.add_trace(trace1, 1, 1)
fig.add_trace(trace2, 1, 1)
fig.add_trace(trace0, 2, 1)
fig.add_trace(trace0, 3, 1)

update_menus = [go.layout.Updatemenu(
        active=0,
        buttons=list(
            [dict(label = 'All',
                  method = 'update',
                  args = [{'visible': [True, True, True,True,True]},
                          {'title': 'all',
                           'showlegend':True}]),
             dict(label = 'First',
                  method = 'update',
                  args = [{'visible': [True, False, False,True,True]}, # the index of True aligns with the indices of plot traces
                          {'title': 'first',
                           'showlegend':True}]),
             dict(label = 'Second',
                  method = 'update',
                  args = [{'visible': [False, True, False,True,True]},
                          {'title': 'second',
                           'showlegend':True}]),
             dict(label = 'Third',
                  method = 'update',
                  args = [{'visible': [False, False, True, False,False]},
                          {'title': 'third',
                           'showlegend':True}]),
            ])
        )
               ]           

fig.update_layout(updatemenus=update_menus)

fig.show()

Answer 1

You will add it to the dictionary as the first one. The vertical position of y is calculated from the middle (yanchor="middle") because the height varies. You will also use method="relayout" because you change the height:

import plotly.graph_objs as go
from plotly import subplots 
trace0 = go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode="lines+markers")
trace1 = go.Scatter(x=[1, 2, 3], y=[5, 4, 6], mode="lines+markers")
trace2 = go.Scatter(x=[1, 2, 3], y=[6, 5, 4], mode="lines+markers")
fig = subplots.make_subplots(rows=3,cols=1,shared_xaxes=True, specs=[[{}], [{}], [{}]])
fig.add_trace(trace0, 1, 1)
fig.add_trace(trace1, 1, 1)
fig.add_trace(trace2, 1, 1)
fig.add_trace(trace0, 2, 1)
fig.add_trace(trace0, 3, 1)

fig.update_layout(height=550,margin={"t":10},
    updatemenus=[
        dict(
            buttons=list([
                dict(label = 'All',
                  method = 'update',
                  args = [{'visible': [True, True, True,True,True]},
                          {'title': 'all',
                           'showlegend':True}]),
             dict(label = 'First',
                  method = 'update',
                  args = [{'visible': [True, False, False,True,True]}, 
                          {'title': 'first',
                           'showlegend':True}]),
             dict(label = 'Second',
                  method = 'update',
                  args = [{'visible': [False, True, False,True,True]},
                          {'title': 'second',
                           'showlegend':True}]),
             dict(label = 'Third',
                  method = 'update',
                  args = [{'visible': [False, False, True, False,False]},
                          {'title': 'third',
                           'showlegend':True}]),
            ]),
            direction="down",
            showactive=True,
            x=0.18,
            y=1.1,
            xanchor="left",
            yanchor="middle"
        ),
        dict(
            buttons=list([
                dict(
                    args=["height", 550],
                    label="Default",
                    method="relayout"
                ),
                dict(
                    args=["height", 1200],
                    label="1500",
                    method="relayout"
                ),
                dict(
                    args=["height", 1000],
                    label="1000",
                    method="relayout"
                ),
                dict(
                    args=["height", 800],
                    label="850",
                    method="relayout"
                )
            ]),
            direction="down",
            showactive=True,
            x=0.4,
            xanchor="left",
            y=1.1,
            yanchor="middle"
        )
    ],
    
)

Output