Hello everyone, I am new with Dash and I am facing an issue with the graphs’ interactivity.
When I display them in my application, I can’t interact with them (e.g. I cannot see the values by hovering the mouse over the charts), as if they were static. But I do not want them to be static.
Here’s an example taken from my code to show how I generate graphs and live update them:
def gen_graphs_div(df)
div = html.Div(
[
dcc.Graph(
id='class',
figure=make_histogram(df, "class"),
config={
"staticPlot": False,
"editable": False,
"displayModeBar": False
}
),
],
),
# other code
def make_histogram(df, dimension):
try:
df_counts = df[dimension].value_counts().rename_axis(dimension).reset_index(name='counts')
fig = px.histogram(
df, x=df_counts[dimension], y=df_counts['counts'],
title='Histogram Chart: ' + dimension,
color_discrete_sequence=['rgb(52, 152, 2191)'],
labels={'x': dimension, 'y': 'counts'}
)
fig.update_layout(
plot_bgcolor='#F9F9F9',
paper_bgcolor='#F9F9F9'
font_color='black',
title_font_color='black'
)
return fig
except KeyError:
return {}
def gen_dashboard_div():
dashboard_div = html.Div(
children=[],
id="statistics-container",
style={'display': 'inline-block'}
)
return dashboard_div
root_layout = [
html.Div(
[
gen_dashboard_div(),
dcc.Interval(
id=interval-statistics-container',
interval=1*1000,
n_intervals=0,
disabled=False
)
], id="mainContainer",
),
]
def serve_layout():
div = html.Div(
root_layout
)
return div
app.layout = serve_layout
@app.callback(
Output(component_id='statistics-container', component_property='children'),
Input(component_id='interval-statistics-container', component_property='n_intervals'),
)
def live_graph_table_updates(interval):
df = get_new_data()
df = pd.read_json(df)
children = [
gen_graphs_div(df),
]
return children
Considering that I am using "staticPlot": False
in config, the fact that I can’t interact with graphs seems very weird to me.
Can someone help me to understand where I am going wrong?
Thanks in advance