I’m building an app that has a dcc.Graph
component that starts out in a html.Div
which has style={"display": "none"}
. I find that when I toggle the style to make the graph show, it doesn’t initially fill the parent container. If I resize the browser window it corrects itself, but the initial size is wrong.
Here’s a minimal example
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Input, Output
app = dash.Dash()
fig = go.Figure(data=[go.Scatter(x=[1, 2, 3, 4, 5], y=[1, 5, 2, 6, 4])])
app.layout = html.Div(
[
html.Button("Show graph", id="button"),
html.Div(
id="graph-container",
children=dcc.Graph(id="graph", figure=fig),
style={"display": "none"},
),
],
style={"max-width": "1000px", "margin": "auto"},
)
@app.callback(
Output("graph-container", "style"), [Input("button", "n_clicks")]
)
def show_graph(n):
if n:
return {"display": "block", "width": "100%"}
return {"display": "none"}
if __name__ == "__main__":
app.run_server(debug=True)
Is there a way I can force the dcc.Graph
to fill its parent container when the style is toggled?