Two graphs, side by side

Dash Python
4

For 3 columns instead of 2, @chriddyp, I do not understand how to use your css properly.

Just inserting another html.div will create another row, but not column. Also I do not understand, why we name it
className=“six columns”, while we just want to 2 cols or in this example 3 cols??

Naive extension (fail) to create 3 columns.

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()
app.layout = html.Div([
html.Div([
html.Div([
html.H3(‘Column 1’),
dcc.Graph(id=‘g1’, figure={‘data’: [{‘y’: [1, 2, 3]}]})
], className=“six columns”),

    html.Div([
        html.H3('Column 2'),
        dcc.Graph(id='g2', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="six columns"),
    
    html.Div([
        html.H3('Column 3'),
        dcc.Graph(id='g3', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="six columns"),
    
        
], className="row")

])

app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})

if name == ‘main’:
app.run_server(debug=True)