How to write an app layout in Dash such that two graphs are side by side?

Question

I want to plot two charts side by side (and not one above the other) in Dash by Plotly. The tutorials did not have an example where the graphs are plotted side by side.

I am writing the app.layout in the following way

app.layout = html.Div(className = 'row', children=

    [
        html.H1("Tips database analysis (First dashboard)"),
        dcc.Dropdown(id='d',
                     options = col_options,
                    value = 'Sun'),
        dcc.Graph(id="graph1"),
        dcc.Graph(id="graph2")
    ]

)

but after this graph1 appears above graph2 rather than side by side

Answer 1

You can achieve this by wrapping the graphs in a div and adding display: inline-block css property to each of the graphs.

app.layout = html.Div(className='row', children=[
    html.H1("Tips database analysis (First dashboard)"),
    dcc.Dropdown(),
    html.Div(children=[
        dcc.Graph(id="graph1", style={'display': 'inline-block'}),
        dcc.Graph(id="graph2", style={'display': 'inline-block'})
    ])
])

Result

EDIT

I removed the display: flex property from the wrapping div, and instead added the display: inline-block property to each of the graphs. This makes it so the second graph does not get cut off, and will instead stack on smaller screens.