Py.Cafe

maartenbreddels/

dash-layout-figures

How to manage the layout of division/figures in dash using bootstrap

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
# original question: https://community.plotly.com/t/how-to-manage-the-layout-of-division-figures-in-dash/6484/1
import dash
from dash import dcc, html
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import pandas as pd
import plotly.express as px


# make sure to include the css
#  see https://dash-bootstrap-components.opensource.faculty.ai/docs/quickstart/
#  default is dbc.themes.BOOTSTRAP, we choose DARKLY
app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY])


df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv"
)


# just a dummy chart
def chart():
    return dcc.Graph(
        figure=px.scatter(
            df,
            "gdpPercap",
            "lifeExp",
            size="pop",
            color="continent",
            size_max=40,
            log_x=True,
            log_y=True,
            template="plotly_dark",
        )
    )


app.layout = html.Div(
    [
        html.Div("Example layout using bootstrap"),
        dbc.Row(
            [
                dbc.Col(
                    html.Div("Row1-Col1"),
                    width=6,
                    style={"border": "1px solid", "padding": "10px"},
                ),
                dbc.Col(
                    [
                        dbc.Row(
                            dbc.Col(
                                html.Div("Nested Row1-Col2-Row1"),
                                style={"border": "1px solid", "padding": "10px"},
                            )
                        ),
                        dbc.Row(
                            dbc.Col(
                                html.Div("Nested Row1-Col2-Row2"),
                                style={"border": "1px solid", "padding": "10px"},
                            )
                        ),
                    ],
                    width=6,
                    style={"border": "1px solid"},
                ),
            ]
        ),
        html.Div("Example layout applied figures"),
        # now almost the same, but with figures/charts
        dbc.Row(
            [
                # we give it a min-height, to make it a bit latter than the figure on its right
                dbc.Col(
                    chart(),
                    width=6,
                    style={
                        "border": "1px solid",
                        "padding": "10px",
                        "min-height": "600px",
                    },
                ),
                dbc.Col(
                    [
                        dbc.Row(
                            dbc.Col(
                                chart(),
                                style={"border": "1px solid", "padding": "10px"},
                            )
                        ),
                        dbc.Row(
                            dbc.Col(
                                chart(),
                                style={"border": "1px solid", "padding": "10px"},
                            )
                        ),
                    ],
                    width=6,
                    style={"border": "1px solid"},
                ),
            ],
            # the align items is to make the charts align to the bottom
            style={"align-items": "end"},
        ),
    ],
    style={"padding": "25px"},
)