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:

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

Hi @yabchexu - it would be helpful if you put the entire code for the app (reproducibility) in the question. Python version would be good too. — Luke Singham
– Luke Singham, Commented Oct 30, 2017 at 16:58
I think you would have to use CSS bundles.. check out this example github.com/plotly/dash-goldman-sachs-report-demo — nyan314sn
– nyan314sn, Commented Nov 20, 2017 at 22:55

Ravi Singh · Accepted Answer · 2018-06-03 14:42:53Z

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"})

answered Jun 3, 2018 at 14:42

Ravi Singh

3014 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrian Fischer · Accepted Answer · 2023-01-11 15:57:19Z

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.

Collectives™ on Stack Overflow

graph layout in dash plotly

2 Answers 2

Comments

App Layout

Graph Layout

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

App Layout

Graph Layout

Comments

Your Answer

Sign up or log in

Post as a guest

Related