Orient 2 graphs based on window aspect (mobile-responsiveness?)

Dash Python
1

I’m not super familiar with CSS. I’m creating an app with 2 graphs. It would be nice if, when the browser is landscape (computer) the graphs are side-by-side. But if the same app is loaded on mobile, the graphs are stacked vertically.

Is this a case of using… media queries (?) and passing that in the style variable for an html.Div containing the two plots or…

1 Like
2

Media queries is a good way to do this. I recommend looking at the Dash styleguide here: https://codepen.io/chriddyp/pen/bWLwgP and adapting it towards your own needs. Here’s an example with that styleguide:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    html.Div([
        html.Div(
            dcc.Graph(id='graph-1', figure={
                'data': [{
                    'x': [1, 2, 3],
                    'y': [4, 1, 3]
                }]
            }),
            className="six columns"
        ),
        html.Div(
            dcc.Graph(id='graph-2', figure={
                'data': [{
                    'x': [1, 2, 3],
                    'y': [4, 1, 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)

dash-responsive
dash-responsive.gif970×968 483 KB

1 Like
3

Thanks Chris! I thought I saw something in the Getting Started Guide but then couldn’t find it again.