Plotly Buttons Do Not Fire when used

Dash Python
1

In the following code - even though I made the second button as active - the vertical lines do not show up directly. Is there a way to enforce the behavior of the graph based on the active button?

import dash,random
from dash import dcc, html
from dash.dependencies import Input, Output
import pandas as pd
import numpy as np
import plotly.graph_objects as go
import dash_mantine_components as dmc

# Create a Dash app
app = dash.Dash(__name__,external_stylesheets=dmc.styles.ALL , url_base_pathname="/")

# Generate a DataFrame with 1 year timeseries as index and random values for two columns


# Define the layout of the app
app.layout = html.Div([
    html.Button('Generate Graph', id='generate-button', n_clicks=0),
    dcc.Graph(id='graph')
])

# Define the callback to update the graph
@app.callback(
    Output('graph', 'figure'),
    Input('generate-button', 'n_clicks')
)
def update_graph(n_clicks):
    if n_clicks > 0:
        date_range = pd.date_range(start='2022-01-01', end='2022-12-31', freq='H')
        df = pd.DataFrame({
            'Column 1': np.random.rand(len(date_range)),
            'Column 2': np.random.rand(len(date_range))
        }, index=date_range)

        fig = go.Figure().update_layout(showlegend=True, margin=dict(l=0, r=0, t=20, b=0), uirevision=True, legend={"yanchor": "middle", "y": 0.5, 'groupclick': "toggleitem"}, plot_bgcolor='white')
        fig.update_xaxes(
            # mirror=True,
            # ticks='outside',
            showline=True,
            linecolor='black',
            gridcolor='lightgrey'
        )
        fig.update_yaxes(
            # mirror=True,
            # ticks='outside',
            showline=True,
            linecolor='black',
            gridcolor='lightgrey'
        )
        button_map = [
            dict(label="Do Not Show",
                 method="relayout",
                 args=["shapes", []]),

        ]
        shapes = [dict(type='line', x0=time_value, x1=time_value, line=dict(color="black", dash="dash", width=1.25), xref='x', yref='paper', y0=0, y1=1) for
                  time_value in random.sample(list(date_range), 10)]
        fig.add_trace(go.Scatter(x=df.index, y=df['Column 1'], mode='lines', name='Column 1'))
        fig.add_trace(go.Scatter(x=df.index, y=df['Column 2'], mode='lines', name='Column 2'))
        fig.update_layout(title='Random Data Timeseries')
        button_map.append(
            dict(label="Show All",
                 method="relayout",
                 args=["shapes", shapes]),

        )
        fig.update_layout(updatemenus=[
            dict(type="buttons", direction="right", active=len(button_map) - 1,
                 x=0.70,
                 xanchor='right',
                 y=1.1,
                 buttons=button_map)
        ])
        return fig
    return {}

# Run the app
if __name__ == '__main__':
    app.run_server(debug=True)
2

Hello @sssaha1989,

The buttons trigger a layout adjustment, the issue here is that you arent passing what the new layout would be when adding.

Adjusting your code here…

fig.update_layout(updatemenus=[
            dict(type="buttons", direction="right", active=len(button_map) - 1,
                 x=0.70,
                 xanchor='right',
                 y=1.1,
                 buttons=button_map)
        ], shapes=shapes)

…allows your layout to render as you are desiring.

1 Like