How to "widen" the graph in Dash?

Dash Python
1

Hi everyone,

In my summary.py I have a layout that consists of a NavBar (coming from the main app.py) and 4 graphs below it (2x rows 2x graphs each).
But the graphs are not wide and do not take up the whole screen and at the same time I have to scroll a bit to bottom to see the lower graphs fully.

Is there any way to automate the sizes of those graphs to fit the whole screen width (and height so that I do not need to scroll down) ?

image
image1891×916 22.3 KB

def summary_layout():
    return dbc.Container(
        [
            dbc.Row(html.Br()),
            dbc.Row(html.Br()),
            dbc.Row([
                dcc.Interval(id="interval-summary", interval=86400000*7, n_intervals=0),  # in milliseconds,1*1000 for actiovation every second, 86400000*7 for activation once/week or when page refreshed)
                dcc.Store(id="salary-data", data=0),
                dcc.Store(id="expenses-data", data=0),
            ]),
            dbc.Row([
                dbc.Col(dcc.Graph(id="chart1"), width=6),
                dbc.Col(dcc.Graph(id="chart2"), width=6)
            ], align="center"),
            dbc.Row([
                dbc.Col(
                    dcc.Dropdown(
                        id="summary-category-dropdown"
                    ),
                    className="dropdown-summary-caregory",
                    width={"size":2, "order":"1", "offset":6}
                ),
                dbc.Col(
                    dcc.Dropdown(
                        ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                        current_month,
                        id="summary-month"
                    ),
                    className="dropdown-summary-month",
                    width={"size":2, "order":2, "offset":0.1}
                ),
                dbc.Col(
                    dcc.Dropdown(
                        [2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025],
                        current_year,
                        className="dropdown-summary-year",
                        id="summary-year"
                    ),
                    width= {"size":2, "order":"last", "offset":0.1}
                ),
            ], align="center"),
            dbc.Row([
                dbc.Col([dcc.Graph(id="chart3")], width=6),
                dbc.Col([dcc.Graph(id="chart4")], width=6)
            ], align="center")
        ]
    )

layout = summary_layout
2

Set the dbc.Container() parameter fluid=True

3 Likes
3

It worked. Thank you.

2 Likes