How to manage the layout of division/figures in dash

[autosun]

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:

1. Generally, How to manage parameters to change the layout?
2. 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]

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]

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]

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]

@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]

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]

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]

@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:

Grid system

[pengchuzhang]

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

[wbrgss]

@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:

Problem layout dash

Hello everyone, I am going through the tutorial Dash and get web app looking different from the apps in the tuto. For instance, taking the code given by chriddyp in the following topic How to manage the layout of division/figures in dash 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", …

[mvdcg]

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]

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]

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]

Two graphs, side by side

I have same issue, I think a reason comes from you update new dash version. Having some changes above code when you append css external url It should be changed: external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) Hope can help you!