Charts don't autofit screen height, despite specifying height/autofit?

Dash Python
1

Hi,

So i’m new to plotly, and can’t seem to find a fix for this issue. I have four charts that I want displayed in a column, at full screen, i.e., i want to see all four charts vertically, without having to scroll.

When i plot them, however, I end up having to scroll down. I have tried setting size=100% or autofit=True, but neither worked. However, when i used width=50%, that worked; the charts only take half the width of the screen, but i still need to scroll down to view them all. I have listed my code below.

Any help here would be greatly appreciated

app = dash.Dash()

app.layout = html.Div([
    # State
    html.Div([
        html.H1(id='map-header',children='State'),
        dcc.Graph(id='map-graph',
                  figure={'data':[{'x':[3,2],'y':[7,12]}],'layout':{'title':'State'}}),
    # Business Units
    html.Div([
        html.H1(id='bu-header',children='Business Units'),
        dcc.Graph(id='bu-graph',
                  figure={'data':[{'x':[3,2],'y':[7,12]}],'layout':{'title':'Business Unit'}})
    ]),
    # Job Family
    html.Div([
        html.H1(id='jf-header',children='Job Family'),
        dcc.Graph(id='jf-graph',
                  figure={'data':[{'x':[3,2],'y':[7,12]}],'layout':{'title':'Job Family'}})
    ]),
    # Job Level
    html.Div([
        html.H1(id='fl-header',children='Job Level'),
        dcc.Graph(id='jl-graph',
                  figure={'data':[{'x':[3,2],'y':[7,12]}],'layout':{'title':'Job Level'}})
    ])
    ])
    
],style={'width':'50%'})

if __name__ == '__main__':
    app.run_server()