Expand dcc.Graph to fill vertical space available (using css or bootsrap components Row/Columns?)

Dash Python
1

Is it possible to create a dcc.Graph object which dynamically rescales to fill all the available height in the window? I’ve tried using styles in Div tags, and also looked into dash-bootstrap-components, but can’t seem to get this working. The automatic scale to fill width seems easy, but filling the vertical space is hard.

Can anyone help please / if this even possible?

I include a basic example below showing a simple structure - how can I make the dcc.Graph object automatically expand to fill available height please?

Note added in edit: I don’t want to hard-code the height of the figure, e.g. using “95vh” or similar, since in my real-world GUI, there will be multiple components and their heights may vary as the user interacts with them. Hence, the need for automatic dynamic stretching of the graph to fill space. Thanks.


import dash

import dash_core_components as dcc

import dash_html_components as html

import plotly.graph_objs as go

app = dash.Dash()

fig = go.Figure(data=[go.Scatter(x=[1, 2, 3, 4, 5], y=[1, 5, 2, 6, 4])])

fig.update_layout(paper_bgcolor="red", autosize=True)

app.layout = html.Div(

    [

        html.Div([

            html.Button("Dummy button to fill space", id="button"),

        ]),

        html.Div(

            id="graph-container",

            children=dcc.Graph(id="graph", figure=fig),

            style={"display": "block", "width": "100%", "background-color": "blue"},

        ),

    ],

    style={"background-color": "green", "height":"100vh"},

)

if __name__ == "__main__":

    app.run_server()
1 Like