✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Dash App - Tabs and Squashed Graphs

Hey,

I am having some issue with Dash and Tabs and my graphs on over tabs being squashed.

My main page “Overview” works fine, and the graphs look good.

However, on my next tab, Sales, the graphs are squashed as below,

Here is the code;

#Overview Tab Content

overview_tab = html.Div(

[

    dbc.Row(dbc.Col(html.P(""))),

    dbc.Row(dbc.Col(dcc.Dropdown(

        id='overview-year-dropdown',

        options=[{'label':'2020/21', 'value':'2020'},{'label':'2021/22', 'value':'2021'}],

        value='2020'

    ))),

    dbc.Row(dbc.Col(html.H3("Profit/Loss"))),

    dbc.Row(dbc.Col(dcc.Graph(figure=profitfig,id='profitline'))),

    dbc.Row(dbc.Col(html.P(""))),

    dbc.Row(

        [

            dbc.Col(html.H3("Year Sales Breakdown")),

            dbc.Col(html.H3("")),

            dbc.Col(html.H3("Year Expense Breakdown")),

        ]

    ),

    dbc.Row(

        [

            dbc.Col(dcc.Graph(figure=sypiefig,id='overview-stypeyearpie')),

            dbc.Col(html.H3("")),

            dbc.Col(dcc.Graph(figure=eypiefig,id='overview-etypeyearpie')),

        ]

    ),        

]

)

#Sales Tab

sales_tab = html.Div(

[

    dbc.Row(dbc.Col(html.P(""))),

    dbc.Row(dbc.Col(dcc.Dropdown(

        id='sales-year-dropdown',

        options=[{'label':'2020/21', 'value':'2020'},{'label':'2021/22', 'value':'2021'}],

        value='2020'

    ))),

    dbc.Row(dbc.Col(dcc.Dropdown(

        id='sales-month-dropdown',

        options=[{'label':'January', 'value':'January'},{'label':'February', 'value':'February'}],

        value='January'

    ))),

    dbc.Row(dbc.Col(html.H3("Years Sales"))),

    dbc.Row(dbc.Col(dcc.Graph(figure=salesfig,id='salesline'))),

    dbc.Row(dbc.Col(html.P(""))),

    dbc.Row(

        [

            dbc.Col(html.H3("Year Sales Breakdown")),

            dbc.Col(html.H3("")),

            dbc.Col(html.H3("Month Sales Breakdown")),

        ]

    ),

    dbc.Row(

        [

            dbc.Col(dcc.Graph(figure=sypiefig,id='sales-stypeyearpie')),

            dbc.Col(html.H3("")),

            dbc.Col(dcc.Graph(figure=smpiefig,id='sales-stypemonthpie')),

        ]

    ),        

]

)

Hopefully someone can help and advise, I don’t particularly want to use a multi page setup and would prefer to use tabs if possibly/