✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Update yaxis range with updatemenus button

Is there a way to update the yaxis range on button click? I am using buttons to toggle source data on a 2y axis chart, and need to manually define the axis ranges for each data series (due to the tick alignment issue that emerges in the default axis range when using 2y axis charts).

For a single 2y chart (i.e., no buttons) I’ve employed the code below, which works fine. Curious if there is a way to update these fields on click. I’ve tried flowing them into buttons.args, but I do not believe (based on external documentation) that these specific attributes are supported.

#Y-axis1 format
fig.update_yaxes(title_text='First yaxis title', tickformat=y1_label_format, range=[y1_min,y1_max], tickvals=y1_tickvals, secondary_y=False)
    
#Y-axis2 format
fig.update_yaxes(title_text='Second yaxis Title', tickformat=y2_label_format, range=[y2_min,y2_max], tickvals=y2_tickvals, secondary_y=True)

I’ve also considered making multiple superimposed, independent charts with buttons to show only the selected chart (and hide the others), although I have not seen any reference on successfully hiding entire charts with buttons (rather than single traces / elements).

Any guidance would be much appreciated…

Hi @petership,

Welcome to the community!

You can look here for an example on how to adjust the layout/data sections of a graph using “updatemenus”.

Otherwise you could create your own buttons and callbacks if you need more flexibility - like to selectively show/hide entire charts. I could elaborate on this if necessary.

I hope I’ve understood your question. :sweat_smile:

Hi @suiroc - thanks for the response. I had seen this page. Let me try to be more specific. In order to make the axes align when I update the underlying plot data, I need to be able to update the following fields on button click: range (y1 axis), range (y2 axis), tickvals (y1 axis), tickvals (y2 axis). These four + the visible field make 5 attributes that need to be updated on button click. I am trying to understand the appropriate way to flow these arguments into updatemenus.buttons. I have tried using a dict similar to the annotations example on the page you have shared, but it was not working. I am not sure whether this is a syntax issue, or whether these arguments are simply not supported with buttons.

Hi @petership,

The updates to be performed are layout updates. This notebook https://chart-studio.plotly.com/~empet/15608 explains how relayout works, with a few detailed examples, including updating yaxis1 and yaxis2.

2 Likes

@empet From example 2, I see that with sliders you can call ‘xaxis.range’. Is that also possible with buttons? For example, can I provide a yaxis range that depends on the data provided in different dropdown options?

Something like {‘yaxis.range’ : [something, something]}

@LOVESN,

Yes you may!!! But if you are referring to the already discussed updates, then you must call the update methd, not relayout, because you are performing both data and layout updates.

I’m facing sort of a similar issue.
I have two subplots and I’m trying to individually provide axis titles for each using buttons. But they seem to be using a shared axis and hence the plots are overlapping.

Being able to provide range to the axis would ideally solve the overlap of subplots while using buttons issue.

Thanks for the help thus far @empet! I now have a semi-related issue with changing format fields on button click.

I have a figure with three subplots - one row and three columns to be exact. Is there a way to update the xaxis title for each individual subplot on button click?

I found this page Changing the xy-Axis Titles with Dropdown Menu which shows how to update axis title of a single plot w/ buttons. Unfortunately I cannot figure out how to translate it to work for multiple subplots. Thanks!

@petership

You didn’t give details on the initial xaxes title before update, for each subplot. That’s why I created this example you can modify acccording to your needs:

import plotly.graph_objects as go
from plotly.subplots import make_subplots

fig = make_subplots(rows=1, cols=3)

print(fig.layout)

fig.add_trace(go.Scatter(x=[1,2], y=[3,4]), 1, 1)
fig.add_trace(go.Scatter(x=[1,2], y=[3,4]), 1, 2)
fig.add_trace(go.Scatter(x=[1,2], y=[3,4]), 1, 3)
fig.update_xaxes(title='x')

button1 = dict(method = "relayout",
               args = [{'xaxis.title': 'first x',
                        'xaxis2.title': 'x',
                        'xaxis3.title': 'x'},
                          ],
               label = 'xaxis1')

button2 = dict(method = "relayout",
               args = [{'xaxis.title': 'x',
                        'xaxis2.title': 'second x',
                        'xaxis3.title': 'x'
                           } 
                          ],
               label = 'xaxis2')
button3 = dict(method = "relayout",
               args = [{ 'xaxis.title': 'x',
                         'xaxis2.title': 'x',
                         'xaxis3.title': 'third x'} 
                          ],
               label = 'xaxis3')
fig.update_layout(width=800, height=400,
                 updatemenus=[dict(active=0,
                                   x= -0.25, y=1, 
                                   xanchor='left', 
                                   yanchor='top',
                                   buttons=[button1, button2, button3])
                              ]) 
1 Like

Solved it! Thanks again @empet!