Updatemenu buttons not working, graph not disappearing

[bee1]

I am writing some code to have a plot containing two graphs, a bar chart and a table. Both are on the same dataframe (an example one has been recreated for this post), so I have set up two buttons one for each graph. However, when I click the button that should hide the table it doesn’t disappear. Code is linked below with an example, thanks for any help.

import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame({'Animals': ['dog', 'cat', 'sheep', 'pig'], 'Count': [4, 7, 2, 8]},
                  columns=['Animals', 'Count'])

# Create example dataframe

layout = go.Layout(
    title="EXAMPLE",
    title_font=dict(size=24, color='#707070'),
    font=dict(size=16, color='#535353'),
    xaxis=dict(
        title='Count',
        gridcolor='rgba(0,0,0,0)'
    ),
    yaxis=dict(
        title='Animals',
        gridcolor='rgba(0,0,0,0)',
        showticklabels=False
    ),
    width=900,
    height=600,
    paper_bgcolor='rgba(0,0,0,0)',
    plot_bgcolor='rgba(0,0,0,0)',
)

# Create layout

fig = go.Figure(layout=layout)

# Create empty figure

fig.add_trace(go.Bar(x=list(df['Count']), y=list(df['Animals']), orientation="h",
                     text=list(df['Animals']), textposition="inside",
                     marker=dict(line=dict(width=5)), visible=False))

# Add bar graph

fig.add_trace(go.Table(header=dict(values=['Animals', 'Count'], line_color='black',
                                   fill_color='rgba(0,0,0,0)', font=dict(size=14, color='#535353')),
                       cells=dict(values=[list(df['Animals'][::-1]), list(df['Count'][::-1])],
                                  line_color='black', fill_color='rgba(0,0,0,0)'), visible=False))

# Add table

# Make 0th trace (bar graph) visible
fig.data[0].visible = True

fig.update_layout(
    updatemenus=[
        dict(
            type="buttons",
            direction="left",
            buttons=list([
                dict(label='Graph',
                     method='update',
                     args=[{'visible': [True, False]}]),
                dict(label='Table',
                     method='update',
                     args=[{'visible': [False, True]}])
            ]),
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.11,
            xanchor="left",
            y=1.1,
            yanchor="top"
        ),
    ]
)

# Add buttons

fig.show()

This happens after selecting the Table graph, then selecting the Bar chart graph button

[empet]

@bee1

In button definitions replace method 'update', by 'restyle', because visible is an attribute of traces. See: https://plotly.com/python/dropdowns/. With this simple change your code will work.

Remove also list from buttons = list([]). Why do you convert a list to list!!! It’s an unnecessary operation.

[bee1]

Hi empet, thanks for the reply. I tried changing the 'update' method to 'restyle', sadly this had no effect and the table still did not disappear.

Also, thank for your comment about buttons = list([]) being unnecessary, however, if you read through the link you sent me it is actually used in the examples which is why I used it. Although, you are correct that it works without this bit of code, I’m not sure why they have used it.

[empet]

@bee1

I copied your code and replaced update by restyle. It worked as expected after two consecutive clicks on Graph and Table. But at the third click Table is no more invisible. This should be caused by the fact that go.Table is a special trace. I

list was introduced in the tutorial by mistake.

[bee1]

That’s so strange, I have made sure I have the most recent version of plotly and pandas. When I change the method to restyle and click it, it has the same effect as when the method is set to update.

Also, that makes a lot of sense, oh well mistakes happen and it’s not doing any harm just unecessary.

Still not working as I’d hoped and I’ve got no new information so I’m not sure what to do, but thanks for trying anyways

[empet]

@bee1

Today I worked on your issue again. First I found that visible=False doesn’t work for go.table: https://github.com/plotly/plotly.js/issues/4640
Even if this issue will be fixed, your code still has a drawback. Namely you set the same layout for both Bar and Table. Your settings for layout are valid only for go.Bar. Hence you should update the layout, too, within each button args, in order to remove xaxis and yaxis title for Bar, when make the Table visible

import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame({'Animals': ['dog', 'cat', 'sheep', 'pig'], 'Count': [4, 7, 2, 8]},
                  columns=['Animals', 'Count'])

# Create example dataframe

layout = go.Layout(
    title="EXAMPLE",
    title_font=dict(size=24, color='#707070'),
    font=dict(size=16, color='#535353'),
    
    width=900,
    height=600,
    paper_bgcolor='rgba(0,0,0,0)',
    plot_bgcolor='rgba(0,0,0,0)',
)

# Create layout

fig = go.Figure(layout=layout)

# Create empty figure

fig.add_bar(x=df['Count'], y=df['Animals'], orientation="h",
                     text=df['Animals'], textposition="inside",
                     marker_line_width=5)

# Add bar graph

fig.add_trace(go.Table(header=dict(values=['Animals', 'Count'], line_color='black',
                                   fill_color='rgba(0,0,0,0)', font=dict(size=14, color='#535353')),
                       cells=dict(values=[list(df['Animals'][::-1]), list(df['Count'][::-1])],
                                  line_color='black', fill_color='rgba(0,0,0,0)'), visible=False))

# Add table

# Make 0th trace (bar graph) visible
fig.data[0].visible = True

fig.update_layout(
    updatemenus=[
        dict(
            
            buttons = [
                dict(label='Graph',
                     method='update',
                     args=[{'visible': [True, False]},
                           {'xaxis.title': 'Count',
                            'xaxis.gridcolor':'rgba(0,0,0,0)',
                            'yaxis.title': 'Animals',
                            'yaxis.gridcolor':'rgba(0,0,0,0)',
                            'yaxis.showticklabels': False}]),
                dict(label='Table',
                     method='update',
                     args=[{'visible': [False, True]},
                           {'xaxis.visible': False,
                            'yaxis.visible': False}])
            ],
            
            x=0.11,
            xanchor="left",
            y=1.1,
            yanchor="top")
        
    ]
)

[bee1]

Oh right I understand now, thanks a lot for still trying at it. I’ll stay updated on that issue and hope for a fix soon, also, I hadn’t noticed my issue with the layout only working for go.Bar that is a really good point. I’ll take note of that as well, thank you for looking into this!