graph layout in dash plotly

Question

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)?

Answer 1

The layout tag of dcc.Graph is used to set the layout of graph not of the HTML. I generally use bootstrap or any other CSS for getting the Grid configuration and it's easy to use grid system instead to align things. You can add a external or inline style sheet by appending this line in your code. Change "external_url" according to the css you are using.

app.css.append_css({"external_url": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"})

Answer 2

Your question contains two separate topics:

App Layout

You want to get something like this:

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

This makes reference to the app layout, since you are defining that you want to have in your dashboard a grid with shape 3x2.

A simple way to achieve this is with the the grid layout of Dash Bootstrap Components.

You can define the layout using this:

 app = dash.Dash(external_stylesheets=[dbc.themes.SLATE]) app.layout = html.Div([ dbc.Row( children = [ dbc.Col(), dbc.Col(dcc.Graph( id='figure1', figure=charts() )) ] ), dbc.Row( children = [ dbc.Col(dcc.Graph( id='figure2', figure=charts() )), dbc.Col() ] ), dbc.Row( children = [ dbc.Col(), dbc.Col(dcc.Graph( id='figure3', figure=charts() )) ] ) ])

In this layout there are 3 rows, and each will contain 2 columns.

Note that each column has the "width" property. The grid has a total width of 12, and you can define the width of each column like this:

 dbc.Col( children = dcc.Graph( id='figure2', figure=charts()), width = 10 ),

Graph Layout

You want one graph to has twice the height of the other one. You can define the height property of each plotly chart as explained in the graph layout documentation of plotly, see here

There you will find multiple examples, but it can be set the same way as you set the width.