Py.Cafe

maartenbreddels/

dash-two-graphs-side-by-side-dbc

Side-by-Side Graph Visualization 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
import dash
from dash import dcc, html
import dash_bootstrap_components as dbc
import plotly.graph_objects as go


# example for https://community.plotly.com/t/two-graphs-side-by-side/5312

# 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])


fig = go.Figure(data=[go.Scatter(y=[1, 2, 3])])
fig.update_layout(template='plotly_dark')    

app.layout = dbc.Row([
    dbc.Col(
        html.Div([
            html.H3('Column 1'),
            dcc.Graph(id='g1', figure=fig)
        ]),
        width=6,
    ),
    dbc.Col(
        html.Div([
            html.H3('Column 2'),
            dcc.Graph(id='g2', figure=fig)
        ]),
        width=6,
    )
])