Remove whitespaces between graphs

Dash Python
1

Hello, everyone.
I’m plotting two graphs side by side, one in each column of the same row. I’ve been trying to remove the whitespace between the columns but without much progress, even after hours of research, to plot them right next to each other. The graphs and the code are below

image
image1735×546 102 KB

import dash_bootstrap_components as dbc
from dash import Dash, html
from . import ids
from …data.source import TariffSource
from …data.geo_loader import GeoSource
from src.components import (
bar_chart_state,
year_dropdown,
map
)

def create_layout(app: Dash, tariff_source: TariffSource, geo_source: GeoSource) → html.Div:

return html.Div(
    className="app-div",
    children=[
        html.H1(app.title),
        html.Hr(),
        html.Div(
            className="dropdown-container",
            children=[
                dbc.Row(
                    [
                        dbc.Col(year_dropdown.render(app, tariff_source)),

                    ],
                ),
            ],
        ),
        html.Div(
            className="graph-container",
            children=[
                dbc.Row(
                    [
                        dbc.Col(bar_chart_state.render(app, ids.MAP_BAR_CHART, geo_source)),
                        dbc.Col(map.render(app, geo_source)),
                    ],
                ),
            ],
        ),
    ],
)
2

@joaoartur,

The graphs will automatically take up the vertical space or the horizontal space, whichever is smaller. Thus, you will have white space between the graphs because the charts are stopping from expanding.

As far as the maps, you can change the map style to take up more of the graph area as well. On top of all of this, you also have the default margins that you can alter that will make the charts not take the maximum amount of space.

3

Hmm, I made the margin update and it got better, but not that much. The current setup is in the image below.

image
image1780×679 109 KB

You can see that the graph container is taking a lot of space, not the graph itself. Is there any way to reduce it? Thanks for the reply, by the way, really appreciate.

4

Are you using any templates in your code? If so, try removing it and see if it fixes it.

5

I was using the standard bootstrap theme, which I removed now and this is the result:

image
image1430×846 94.3 KB

Now I just need to align the images height. Thanks man, really helped.

6

Ah, ok. Yeah, the dbc will automatically align.

You should be able to pass a height argument on the columns that are the same, and that might make it work for you.

7

Thanks, man, really helped.
But would it be possible to use a theme and make the graphs side by side just like the one without any themes?

8

You should be able to do it, you can either pass height and width adjustments to the graphs, or adjust the columns that are in the row.

This will give you some of the things that you can alter in the layout for the graph.

The dbc columns you can pass width adjustments to bring the graphs closer.