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

user_2436437 0
Viewed 13263

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

plotly-dash plotly python
2 Answers

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'})
    ])
])

ResultSide-by-side Graphs

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.

user_46106660

In case someone wants to use a horizontal spacer between the plots, so that the space in the middle is filled by the spacer and the plots are positioned on the outer left and outer right side - the following approach is successful in my case.

Step 1:

Add an assets folder to the root folder of your project. This asset folder is allowed to contain .css and .js files. This allows one to add custom css to a dash app, as stated here: https://dash.plotly.com/external-resources#:~:text=Adding%20Your%20Own%20CSS%20and%20JavaScript%20to%20Dash%20Apps&text=Including%20custom%20CSS%20or%20JavaScript,are%20included%20in%20this%20folder.

Step 2:

Add the style.css file to your assets folder, containing the following css:

.parent {
  display: flex;
  flex-direction: row;
}

.spacer {
  flex-grow: 1;
}

.plot{
    display: flex;
    width: 50%
}

@media screen and (max-width: 1200px) {
  .parent{
    flex-direction: column;
  }
  .plot{
    width: 100%
  }
}

The dash project locates the .css file automatically, as long as it is stored in the assets folder.

Step 3:

Wrap your plots with a html.Div() and put another html.Div() between the plots. Set the className parameter of both html.Div()'s and the dcc.Graph()'s according to the css classes which were defined in the style.css file


 app.layout = html.Div([
    html.Div(className='row', children=[
        dcc.Dropdown(),
        html.Div(className='parent', children=[
            dcc.Graph(id='plot1', className='plot'),
            html.Div(className='spacer'),
            dcc.Graph(id='plot2', className='plot'),
        ])
    ]),
])

Edit:

Added media query and some additional styles to the css, now it can also be used as a responsive solution

user_94696400
Related