Plotly-Dash: How to design the layout using dash bootstrap components?

Question

I'm very new to Dash Plotly and I'm trying to figure out how can I design a layout like this.

Layout:

As I understood, this can be done more easy using dash bootstrap components. https://dash-bootstrap-components.opensource.faculty.ai As a first step I should reproduce the layout (grey tiles) and as a second step, I should add some text and some graphs. Just basic.

Thank you.

Solution 1

You should check out this link to learn more about Dash Bootstrap Components, and how to structure your layout.

I have made an example using JupyterDash that matches your desired layout.

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px
# Iris bar figure
def drawFigure():
    return  html.Div([
        dbc.Card(
            dbc.CardBody([
                dcc.Graph(
                    figure=px.bar(
                        df, x="sepal_width", y="sepal_length", color="species"
                    ).update_layout(
                        template='plotly_dark',
                        plot_bgcolor= 'rgba(0, 0, 0, 0)',
                        paper_bgcolor= 'rgba(0, 0, 0, 0)',
                    ),
                    config={
                        'displayModeBar': False
                    }
                ) 
            ])
        ),  
    ])
# Text field
def drawText():
    return html.Div([
        dbc.Card(
            dbc.CardBody([
                html.Div([
                    html.H2("Text"),
                ], style={'textAlign': 'center'}) 
            ])
        ),
    ])
# Data
df = px.data.iris()
# Build App
app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])
app.layout = html.Div([
    dbc.Card(
        dbc.CardBody([
            dbc.Row([
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
            ], align='center'), 
            html.Br(),
            dbc.Row([
                dbc.Col([
                    drawFigure() 
                ], width=3),
                dbc.Col([
                    drawFigure()
                ], width=3),
                dbc.Col([
                    drawFigure() 
                ], width=6),
            ], align='center'), 
            html.Br(),
            dbc.Row([
                dbc.Col([
                    drawFigure()
                ], width=9),
                dbc.Col([
                    drawFigure()
                ], width=3),
            ], align='center'),      
        ]), color = 'dark'
    )
])
# Run app and display result inline in the notebook
app.run_server(mode='external')

Solution 2

Yes - this can be done with dash-bootstrap. Since the screen layout is divided into 12 columns - you'll have to set the width by the number of columns you would like each section to take. So if for example, you need 4 columns, each should be width a width=3.

Your layout would look something like this - 3 rows, the first with 4 columns, the second with 3 columns, the third with 2 columns. After building the layout - you can play with the width of the columns in each row - so it would fit the layout you need

dbc.Row([dbc.Col([content]),dbc.Col([content]),dbc.Col([content]),dbc.Col([content])]),
dbc.Row([dbc.Col([content]),dbc.Col([content]),dbc.Col([content])]),
dbc.Row([dbc.Col([content]),dbc.Col([content])])

You can see a detailed explanation here

Here is a working dash example:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.CYBORG])
app.layout = \
dbc.Container\
([
    html.Br(),
    dbc.Row([
    dbc.Col([dbc.Button("row 1 col 1",style={"width":"100%"})],width=3),
    dbc.Col([dbc.Button("row 1 col 2", style={"width": "100%"})],width=3),
    dbc.Col([dbc.Button("row 1 col 3",style={"width":"100%"})],width=3),
    dbc.Col([dbc.Button("row 1 col 4",style={"width":"100%"})],width=3),
    ]),
    html.Br(),
    dbc.Row([
    dbc.Col([dbc.Button("row 2 col 1",style={"width":"100%"})],width=3),
    dbc.Col([dbc.Button("row 2 col 2", style={"width": "100%"})],width=3),
    dbc.Col([dbc.Button("row 2 col 3",style={"width":"100%"})],width=6),
    ]),
    html.Br(),
    dbc.Row([
    dbc.Col([dbc.Button("row 3 col 1",style={"width":"100%"})],width=9),
    dbc.Col([dbc.Button("row 3 col 2", style={"width": "100%"})],width=3),
    ])
])
if __name__ == "__main__":
    app.run_server(debug=False, port=8050, host='0.0.0.0')

Comments

[Wahyu Bram]

thanks for the clue and the code. from your code, I see that the maximum width for one full page wide is 12. how about the height, how much maximum height for all graph just for one fullpage, that's means not need to scroll down to see it?

[Roee Anuar]

@Napier - if you ask the same question, you'll get the same answer

[Andrei Krivoshei]

@Kristian Haga, why are you using dbc.Card as a container for all the other elements (rows, cards)?

[Kristian Haga]

@AndreiKrivoshei I can't remember exactly, I think it was just an easy way to get different background colors by specifying color='dark' on the outer Card. You can probably just replace the outer Card with a basic Div or some other container.

[jason m]

This is a beautiful and very simple to forward example. Thank you for that.