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/