Layout using dash_bootstrap_components

Dash Python
1

So I wanted to set up some plots just like this user asked using dash_bootstrap_components. I.e. I want plots set up like:

+++++++++++++++++++++++
+         +  figure2  +
+ figure1 +           +
+         +  figure3  + 
+++++++++++++++++++++++

Caveat: I do not want to put all the plots on the same figure.

Below, I’ve recreated the row that’s within my container that’s giving me a problem:

 dbc.Row([
        dbc.Col([
            dcc.Graph(id = 'map-graph')
        ], 
        width = 6),
        dbc.Col([
            html.Div([
                dbc.Row([
                    dcc.Graph(id = 'another-graph')
                ]),
                dbc.Row([
                    dcc.Graph(id = 'bar-graph')  
                ])
            ])
            
        ], 
        width = 6)
 ], justify = 'between')

Note that I’m using the external style sheet provided in the documentation:

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

When I run the app I run into a similar problem that the above-referenced user had (not exact). My empty plots look like this:

+++++++++++++++++++++++
+ figure1 +  figure2  +
+         +           +
+         +  figure3  + 
+++++++++++++++++++++++

And I’ve got to scroll down the page to see “figure3”. If anyone knows how to achieve this layout please let me know. I’ve attempted several configurations and none of them are working.

2

You can specify align="center" in the Col component (or you can do the same in Row to apply center-alignment to every Col in that Row), which should do what you want. Check out the vertical alignment section of the layout page in the dash-bootstrap-components docs.

Also I don’t recommend you use Row without the children being inside a Col, as the Row sets negative margins so that the contents of the first and last Col (which have margins) are flush with the edge of the parent element. In your case though, since you want the second column of graphs to be full width, you don’t need another level of rows, just have the graphs as children of the Col.

dbc.Row(
    [
        dbc.Col([dcc.Graph(id="map-graph")], width=6, align="center"),
        dbc.Col(
            [dcc.Graph(id="another-graph"), dcc.Graph(id="bar-graph")], width=6
        ),
    ],
)

Let me know if that works.

2 Likes
3

That works! Thank you for the solution and for the note re: Row & Col.

1 Like