How to manage the layout of division/figures in dash

autosun · October 25, 2017, 7:54am

I have a very general question: how to manage the layout for the division/graphs in a dashboard made by dash-plotly in python. Assume I have a code below:

def charts():
    data = [go.Bar(
        x=['giraffes', 'orangutans', 'monkeys'],
        y=[20, 14, 23] )]
    return data
app = dash.Dash()

app.layout = html.Div([

    html.Div([
        dcc.Graph(
            id='figure1',
            figure=charts()
        ),
    ], style={'width': '49%', 'display': 'inline-block'}),
    html.Div([
        dcc.Graph(
            id = 'figure2',
            figure=charts()
        ),
        dcc.Graph(
            id='figure3',
            figure=charts()
        )
    ], style= {'width': '49%', 'display': 'inline-block'})
])

if __name == '__main__':
    app.run_server()

What I want is:

+++++++++++++++++++++++
+         +  figure2  +
+ figure1 +           +
+         +  figure3  + 
+++++++++++++++++++++++

But what I got:

+++++++++++++++++++++++
+         +  figure2  +
+         +           +
+ figure1 +  figure3  + 
+++++++++++++++++++++++

The question are here:

Generally, How to manage parameters to change the layout?
using width to mange the width but how to manage the height (in this case I want the figure1’s height doubles that of figure2 or figure3)?

Kefeng · October 25, 2017, 2:40pm

Hi @autosun,

I am as newbie as you concerning Dash, but I guess that the answer you are looking for is CSS. You may try to add the keyword “verticalAlign” (or “vertical-align” depending on how you define your dictionary) in your style dictionary.

html.Div([
    dcc.Graph(
        id='figure1',
        figure=charts()
    ),
], style={'width': '49%', 'display': 'inline-block', 'vertical-align': 'middle'}),

Didn’t actually try it, but it should work. There are more options available that you can find here.

chriddyp · October 27, 2017, 8:42pm

Hey @autosun and @Kefeng –

Also check out the CSS file that I wrote here: https://codepen.io/chriddyp/pen/bWLwgP. Here’s a simple example to generate your layout with that CSS file and by setting the height of the figure with figure.layout.height:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    html.Div(
        className="row",
        children=[
            html.Div(
                className="six columns",
                children=[
                    html.Div(
                        children=dcc.Graph(
                            id='left-graph',
                            figure={
                                'data': [{
                                    'x': [1, 2, 3],
                                    'y': [3, 1, 2],
                                    'type': 'bar'
                                }],
                                'layout': {
                                    'height': 800,
                                    'margin': {
                                        'l': 10, 'b': 20, 't': 0, 'r': 0
                                    }
                                }
                            }
                        )
                    )
                ]
            ),
            html.Div(
                className="six columns",
                children=html.Div([
                    dcc.Graph(
                        id='right-top-graph',
                        figure={
                            'data': [{
                                'x': [1, 2, 3],
                                'y': [3, 1, 2],
                                'type': 'bar'
                            }],
                            'layout': {
                                'height': 400,
                                'margin': {'l': 10, 'b': 20, 't': 0, 'r': 0}
                            }
                        }
                    ),
                    dcc.Graph(
                        id='right-bottom-graph',
                        figure={
                            'data': [{
                                'x': [1, 2, 3],
                                'y': [3, 1, 2],
                                'type': 'bar'
                            }],
                            'layout': {
                                'height': 400,
                                'margin': {'l': 10, 'b': 20, 't': 0, 'r': 0}
                            }
                        }
                    ),

                ])
            )
        ]
    )
])

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

if __name__ == '__main__':
    app.run_server(debug=True)

amarv · June 20, 2018, 7:00pm

Why not use Bootstrap classes? This layout seems to break when within a div.container as the first column is given a 4% margin-left when I think it doesn’t need it, causing the second column to fall to the next row.

Varlor · March 26, 2019, 11:23am

@chriddyp When I excecute the code only 2/3 of the space on one site in used (widescreen). How cann I fill all the space?

Moreover other elements are not scaled at all. I try this code:

uploadContent =html.Div([
html.Div(className='row'),
html.Div(className='row',children=[
    html.Div(className='six columns',children=[dcc.Graph(
            id='graph-12-tabs',
            figure={
                'data': [{
                    'x': [1, 2, 3],
                    'y': [3, 1, 2],
                    'type': 'bar'
                }],
                'layout': {
                    'height': 800,
                    'margin': {
                        'l': 10, 'b': 20, 't': 0, 'r': 0
                    }
                }
            }
        )]),
    html.Div(className='six columns', children=[dcc.Graph(
        id='graph-13-tabs',
        figure={
            'data': [{
                'x': [1, 2, 3],
                'y': [3, 1, 2],
                'type': 'bar'
            }],
            'layout': {
                'height': 800,
                'margin': {
                    'l': 10, 'b': 20, 't': 0, 'r': 0
                }
            }
        }
    )])

]),
html.Div(className='row',
         children=[
             html.Div(className='six columns',
                      children=[
                            html.Div(
                                children=dcc.Upload(['Drag and Drop or ',html.A('Select a File')],
                                id='upload', style={
                                'width': '100%',
                                'height': '60px',
                                'lineHeight': '60px',
                                'borderWidth': '1px',
                                'borderStyle': 'dashed',
                                'borderRadius': '5px',
                                'textAlign': 'center'
                            },
                                       multiple=True)),#,style={'width': '49%'}, 'display': 'inline-block'
            html.Div(className='six columns',
                     children=[
                         html.Div([dt.DataTable(
                                id='datatable',
                                rows=[{}],
                                row_selectable=False,
                                filterable=True,
                                sortable=True,
                                editable=False,

                            )])])]#,style={'width': '49%'}, 'display': 'inline-block'
                                ),

],style={'marginLeft': 10, 'marginRight': 10, 'marginTop': 10, 'marginBottom': 10,
           'backgroundColor':'#F7FBFE',
           'border': 'thin lightgrey dashed', 'padding': '6px 0px 0px 8px'})])

The only thing which changes the size is in style: width. There I can plot many graphs in one row, with adjusting the width for every graph. For three graphs 33% like here:

But with className row and col : No matter how many graphs I put in a row with className row and columns. There are only two graphs possible in a row, always having the same size. The same with the datatable down the graphs. I have to declare in the style of the div.html in which the datatable is inside that width is 100%. Without it is as small as you can see in the first picture. Is this connected with the external stylesheet?: external_stylesheets = [‘https://codepen.io/chriddyp/pen/dZVMbK.css’]

monildoshi · October 23, 2019, 6:37am

I am getting this for all the dash layouts that I am defining.
Despite trying to arrange it in the format above, all I get is in consecutive row format as shown in diagram.

After trying on different machines, I realised that it is peculiar only on mine.
The packages are updated, the browser is compatible.
It is some other issue that I cannot understand.

Regards,
Monil

pengchuzhang · November 7, 2019, 3:29pm

Chriddyp and all: nice example to have one on the left and two graphs on the right. It seems straightforward to do it with BWLwgP, but I am using bootstrap.components. It defines rows, in a row, you can have columns side by side. But bootstrap seems not able to have two rows in a column, some thing likes this:

dbc.Row([
dbc.Col([…])
dbc.Col([
dbc.Row([
dbc.Col([…])
dbc.Col([…])
])
])
])
I could not find any answers by searching.

Thanks.

Pengchu

dimark · November 7, 2019, 3:53pm

@pengchuzhang

I am not sure what you mean. Are you trying to nest Rows and Cols? Because that is also doable with bootstrap’s grid system.

Example:

app.layout = html.Div([
    dbc.Row(
        [
            dbc.Col(html.Div('Row1-Col1'), width=6, style={'border': '1px solid'}),
            dbc.Col(
                [
                    dbc.Row(
                        dbc.Col(html.Div('Nested Row1-Col2-Row1'), style={'border': '1px solid'})
                    ),
                    dbc.Row(
                        dbc.Col(html.Div('Nested Row1-Col2-Row2'), style={'border': '1px solid'})
                    )
                ],
                width=6,
                style={'border': '1px solid'}
            )
        ]
    )
]
)

Also read here:

pengchuzhang · November 7, 2019, 6:00pm

Dimark:
Thanks, that is exactly I wanted. Row nests columns and column nests rows.
Pengchu

wbrgss · November 26, 2019, 6:01pm

@monildoshi It’s likely that the Codepen CSS is not loading. If it’s only on your machine, perhaps your browser is blocking the resource. You can try downloading the CSS on your machine and pointing to it locally. Or, you can try using the external_stylesheets parameter in dash.Dash() instead of app.css.append_css(). Community member @yoannp appears to have the same result; and I made a similar suggestion on his post here:

mvdcg · December 19, 2019, 10:29pm

Hi, I had the same problem presented by @monildoshi. The first sugestion made by @wbrgss, wich is download de CSS file and point it locally worked for me. I used the following command:

app.css.append_css({
‘external_url’:‘C:/[my path]/bWLwgP.css’
})

Thanks everyone!

cherepanovic · June 19, 2020, 1:43pm

I didnt get the desired result… no idea why is it the case

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc

app = dash.Dash()

app.css.config.serve_locally = False
app.scripts.config.serve_locally = False

app.layout = html.Div([
    dbc.Col(
        [
            dbc.Col(html.Div('Row1-Col1'), width=6, style={'border': '1px solid'}),
            dbc.Col(
                [
                    dbc.Row(
                        dbc.Col(html.Div('Nested Row1-Col2-Row1'), style={'border': '1px solid'})
                    ),
                    dbc.Row(
                        dbc.Col(html.Div('Nested Row1-Col2-Row2'), style={'border': '1px solid'})
                    )
                ],
                width=6,
                style={'border': '1px solid'}
            )
        ]
    )
]
)

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

if __name__ == '__main__':
    app.run_server(debug=True)

cherepanovic · June 19, 2020, 1:55pm

Hi, I had the same problem presented by @monildoshi. The first sugestion made by @wbrgss, wich is download de CSS file and point it locally worked for me. I used the following command:

I didn’t get it even after having used locally.

Does have any suggestions for me?

cherepanovic · June 19, 2020, 2:05pm

maartenbreddels · October 8, 2024, 10:18am

I agree that the best way to do this is using Bootstrap’s grid system (which is a defacto standard). I’ve provided a fully working example (with editable code and output) that addresses the original question using Dash Bootstrap Components. You can view it here:

@cherepanovic I think you were missing the bootstrap CSS, you can check my example where I do

app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY])

Topic		Replies	Views
How to create a dashboard with "tiles"? Dash Python	2	5135	August 15, 2018
Layout documentation Dash Python	1	2324	July 25, 2019
Problem layout dash Dash Python	2	4917	December 22, 2019
How to management layout-grid : (CSS) [Issue] Dash Python	1	1370	February 7, 2020
How to increase chart size relative to div Dash Python	5	4687	November 8, 2019

How to manage the layout of division/figures in dash

Related Topics