График Dash/Plotly Layout тесно связан между собой ⇐ Html

[Anonymous]

Я тестирую этот макет Dash/Plotly, который имеет 4 графика, и мне нужно, чтобы они были тесно связаны друг с другом, но, похоже, он не работает. Мне кажется, что графики Plotly добавляют много пробелов вокруг графика, создавая много пустого пространства между ними.
Сначала я попробовал HHTML.Div(), затем прочитал в SO некоторые сообщения, что dbc/dcc - лучший выбор, но использование этого также дало тот же результат.
Это мой макет на данный момент.
app.layout = dbc.Container(
[
dbc.Row(dbc.Col(html.H1("Monitoring Dashboard"), width={'size': 6, 'offset': 3})),
dbc.Row(
[
dbc.Col(dcc.Graph(id="cpu-usage-graph", className="graph-container"), width=6, className="p-0"),
dbc.Col(dcc.Graph(id="memory-usage-graph", className="graph-container"), width=6, className="p-0"),
],
className="g-0"
),
dbc.Row(
[
dbc.Col(dcc.Graph(id="disk-usage-graph", className="graph-container"), width=6, className="p-0"),
dbc.Col(dcc.Graph(id="network-traffic-graph", className="graph-container"), width=6, className="p-0"),
],
className="g-0"
),
dcc.Interval(
id="interval-component",
interval=60*1000, # in milliseconds
n_intervals=0
)
],
fluid=True
)

Вот что я получаю. Графики во втором ряду (из-за того, что расстояние между строками выше составляет около 2–3 дюймов), а графики второго ряда располагаются под окном браузера, и для просмотра их нужно прокручивать вниз.


Я пытался выполнить ссылку на компоненты Dash Bootstap
CSS
.p-0 {
padding: 0 !important;
}

.g-0 {
margin: 0 !important;
}

.graph-container {
height: 300px;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... t-together