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

Did my answer solve your problem after update based on your request? — Hamzah Al-Qadasi
– Hamzah Al-Qadasi, Commented Nov 24, 2022 at 21:07
Yes it solve my solution but I have another problem When i select 1000 or 1500 from dropdown, position of button is also changed. Can we make both button at fix position? — OneTouchForHeight
– OneTouchForHeight, Commented Dec 1, 2022 at 2:52

Hamzah Al-Qadasi · Accepted Answer · 2022-11-13 18:22:16Z

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

When i select 1000 or 1500 from dropdown, position of button is also changed. Can we make both button at fix position?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related