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)