place 2 different graphs side by side using Dash Plotly

Question

How would you go about allowing 2 different graphs to sit side by side using Dash Plotly?

I would like to change the layout to allow the graph2 and graph3 side by side.

######################### Laying out Charts & Widgets to Create App Layout ##########
header = html.H2(children="Fast Food in U.S.")

row1 = html.Div(children=[graph1], className="eight columns")  # No dropdown for graph1

graphs_div = html.Div(children=[
    html.Div(children=[multi_select_graph2, graph2], className="six columns"),
    html.Div(children=[dropdown_graph3, graph3], className="six columns")
], className="row")  # Wrap both graphs in a single row

layout = html.Div(children=[header, row1, graphs_div], style={"text-align": "center", "justifyContent": "center"})

app.layout = layout

Answer 1

To place your dash components you can use the dash_bootstrap_components package. See the https://dash-bootstrap-components.opensource.faculty.ai/docs/ This package has 2 usefull functions dbc.col() and dbc.row().

header = html.H2(children="Fast Food in U.S.")
row1 = html.Div(children=[graph1], className="eight columns")  # No dropdown for graph1

graphs_div = html.Div(children=[

    dbc.Row([
             dbc.col([
                  html.Div(children=[multi_select_graph2, graph2], className="six columns")
             ]),
             dbc.col([
                  html.Div(children=[dropdown_graph3, graph3], className="six columns")
], className="row")  # Wrap both graphs in a single row
             ]),
    ])
layout = html.Div(children=[header, row1, graphs_div], style={"text-align": "center", "justifyContent": "center"})

app.layout = layout

To find out more, you can also choose the width of each columns.