Change subplot y axis text via dropdown selection in plotly

Question

I have a plot which have 3 subplots and one dropdown. I want to change the yaxis subplot text when I select one from drowdown. yaxis.title or yaxis2.title is not working.

Note: without using dash

Is is possible if i can change only 3rd subplot yaxis title text (not 1st and 2nd subplot)?

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 = 'relayout',
                  args = [{'visible': [True, True, True,True,True]},
                          {'title': 'all',
                           'showlegend':True},
                         {'yaxis.title':'fgv','yaxis2.title':'ram','yaxis3.title':'gen'}]),
             dict(label = 'First',
                  method = 'relayout',
                  args = [{'visible': [True, False, False,True,True]}, # the index of True aligns with the indices of plot traces
                          {'title': 'first',
                           'showlegend':True},
                         {'yaxis.title':'fgv','yaxis2.title':'ram','yaxis3.title':'gen'}]),
             dict(label = 'Second',
                  method = 'relayout',
                  args = [{'visible': [False, True, False,True,True]},
                          {'title': 'second',
                           'showlegend':True},
                         {'yaxis.title':'fgv','yaxis2.title':'ram','yaxis3.title':'gen'}]),
             dict(label = 'Third',
                  method = 'relayout',
                  args = [{'visible': [False, False, True, False,False]},
                          {'title': 'third',
                           'showlegend':True},
                         {'yaxis.title':'fgv','yaxis2.title':'ram','yaxis3.title':'gen'}]),
            ])
        )
               ]           

fig.show()

Answer 1

You need to use the update method instead of relayout (because you're changing both the data and the layout). The different methods are outlined here.

And if I am not mistaken, you want the traces to be visible in the order you've added them to the subplots, meaning the 'first' dropdown should result in the traces [True, True, True, False, False] being shown, and so on, the second dropdown should result in the traces [False, False, False, True, False] being shown, and so on...

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,
                           'yaxis.title':'fgv','yaxis2.title':'ram','yaxis3.title':'gen'}]),
             dict(label = 'First',
                  method = 'update',
                  args = [{'visible': [True, True, True, False, False]}, # the index of True aligns with the indices of plot traces
                          {'title': 'first',
                           'showlegend':True,
                           'yaxis.title':'fgv','yaxis2.title':'ram','yaxis3.title':'gen'}]),
             dict(label = 'Second',
                  method = 'update',
                  args = [{'visible': [False, False, False,True,False]},
                          {'title': 'second',
                           'showlegend':True,
                           'yaxis.title':'fgv','yaxis2.title':'ram','yaxis3.title':'gen'}]),
             dict(label = 'Third',
                  method = 'update',
                  args = [{'visible': [False, False, False, False,True]},
                          {'title': 'third',
                           'showlegend':True,
                           'yaxis.title':'fgv','yaxis2.title':'ram','yaxis3.title':'gen'}]),
            ])
        )
    ]           
fig.update_layout(updatemenus=update_menus)
fig.show()

Answer 2

• You need to use update instead of relayoutbecause you change data and layout of subplots.

• You should also add text to yaxis3.title to become yaxis3.title.text.

• Lastly, you need to merge all updates of layout together in the same dictionary in args.

   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,
                            'yaxis.title.text':'fgv','yaxis2.title.text':'ram','yaxis3.title.text':'gen'}]),
                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,
                              'yaxis.title.text':'fgv','yaxis2.title.text':'ram','yaxis3.title.text':'gen'}]),
                dict(label = 'Second',
                     method = 'update',
                     args = [{'visible': [False, True, False,True,True]},
                             {'title': 'second',
                              'showlegend':True,
                              'yaxis.title.text':'fgv','yaxis2.title.text':'ram','yaxis3.title.text':'gen'}]),
                dict(label = 'Third',
                     method = 'update',
                     args = [{'visible': [False, False, True, False,False]},
                             {'title': 'third',
                              'showlegend':True,
                            'yaxis.title.text':'fgv','yaxis2.title.text':'ram','yaxis3.title.text':'gen'}]),
               ])
           )
                  ]           
  
   fig.update_layout(updatemenus=update_menus)
  

If You want to control the title of yaxis3 through dropdown menu, you can do the following:

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)
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=[{"yaxis3.title.text":"Seconds"}],
                    label="Seconds",
                    method="relayout"
                ),
                dict(
                    args=[{"yaxis3.title.text":"Minutes"}],
                    label="Minutes",
                    method="relayout"
                ),
                dict(
                    args=[{"yaxis3.title.text":"Hours"}],
                    label="Hours",
                    method="relayout"
                )
            ]),
            direction="down",
            showactive=True,
            x=0.4,
            xanchor="left",
            y=1.1,
            yanchor="middle"
        )
    ],
    
)