Two graphs, side by side

Is it possible to render one pie chart and one bar chart, side by side, in dash? I’ve tried to use subplots but they either:
A) merge the legends together, and the pie chart overlaps the bar chart (if I specify xaxis2 and yaxis2)
B) throw an error saying pie charts don’t take parameter xaxis (if I use tools.make_subplots())

Should I be working with css to set the sizes and place them on the same line? or is there something wonderful that I’m missing?

Thanks in advance!

1 Like

CSS is a good way to do this. Here’s an example using the default style sheet (https://codepen.io/chriddyp/pen/bWLwgP):

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()
app.layout = html.Div([
    html.Div([
        html.Div([
            html.H3('Column 1'),
            dcc.Graph(id='g1', figure={'data': [{'y': [1, 2, 3]}]})
        ], className="six columns"),

        html.Div([
            html.H3('Column 2'),
            dcc.Graph(id='g2', figure={'data': [{'y': [1, 2, 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)

5 Likes

Wow, thank you! This is exactly what I needed, and works exactly like I wanted it to! :slight_smile:
(on a sidenote - it would be a cool feature to be able to use columns and rows without needing to add a css stylesheet. This is great though!)

For 3 columns instead of 2, @chriddyp, I do not understand how to use your css properly.

Just inserting another html.div will create another row, but not column. Also I do not understand, why we name it
className=“six columns”, while we just want to 2 cols or in this example 3 cols??

Naive extension (fail) to create 3 columns.

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()
app.layout = html.Div([
html.Div([
html.Div([
html.H3(‘Column 1’),
dcc.Graph(id=‘g1’, figure={‘data’: [{‘y’: [1, 2, 3]}]})
], className=“six columns”),

    html.Div([
        html.H3('Column 2'),
        dcc.Graph(id='g2', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="six columns"),
    
    html.Div([
        html.H3('Column 3'),
        dcc.Graph(id='g3', figure={'data': [{'y': [1, 2, 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)

i think it is reffer to bootstrap grid system in which every row has 12 cols. “six columns” is about width of divs and not about number of displayed graphs. you can have 3 graphs with className=“four columns” in 1 row. Look at bootstrap grid guide
https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

2 Likes

Hi I think this css has a wrong labeling. One column = max 12 graphs, three columns= max 4 graphs per row.??

See this example. However when the number of graphs per row is above 6, the layout becomes pretty much useless. (Too much spacing, …). Or, maybe someone should write a style guide how to use this css correctly.

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()
app.layout = html.Div([
html.Div([
html.Div([
html.H3(‘Column 1’),
dcc.Graph(id=‘g1’, figure={‘data’: [{‘y’: [1, 2, 3]}]})
], className=“one-third column”),

    html.Div([
        html.H3('Column 2'),
        dcc.Graph(id='g2', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one-third column"),
    
    html.Div([
        html.H3('Column 3'),
        dcc.Graph(id='g3', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one-third column"),
      
], className="row"),
html.Div([
    html.Div([
        html.H3('Column 1'),
        dcc.Graph(id='g4', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="three columns"),

    html.Div([
        html.H3('Column 2'),
        dcc.Graph(id='g5', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="three columns"),
    
    html.Div([
        html.H3('Column 3'),
        dcc.Graph(id='g6', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="three columns"),

    html.Div([
        html.H3('Column 4'),
        dcc.Graph(id='g7', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="three columns"),
     
], className="row"),
   html.Div([
    html.Div([
        html.H3('Column 1'),
        dcc.Graph(id='g8', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="two columns"),

    html.Div([
        html.H3('Column 2'),
        dcc.Graph(id='g9', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="two columns"),
    
    html.Div([
        html.H3('Column 3'),
        dcc.Graph(id='g10', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="two columns"),

    html.Div([
        html.H3('Column 4'),
        dcc.Graph(id='g11', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="two columns"),
    
     html.Div([
        html.H3('Column 5'),
        dcc.Graph(id='g12', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="two columns"),

    html.Div([
        html.H3('Column 6'),
        dcc.Graph(id='g13', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="two columns"),
], className="row"),
  html.Div([
    html.Div([
        html.H3('Column 1'),
        dcc.Graph(id='g14', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),

    html.Div([
        html.H3('Column 2'),
        dcc.Graph(id='g15', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),
    
    html.Div([
        html.H3('Column 3'),
        dcc.Graph(id='g16', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),

    html.Div([
        html.H3('Column 4'),
        dcc.Graph(id='g17', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),
    
     html.Div([
        html.H3('Column 5'),
        dcc.Graph(id='g18', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),

    html.Div([
        html.H3('Column 6'),
        dcc.Graph(id='g19', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),
    
      html.Div([
        html.H3('Column 7'),
        dcc.Graph(id='g20', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),

    html.Div([
        html.H3('Column 8'),
        dcc.Graph(id='g21', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),
    
    html.Div([
        html.H3('Column 9'),
        dcc.Graph(id='g22', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),

    html.Div([
        html.H3('Column 10'),
        dcc.Graph(id='g23', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),
    
    html.Div([
        html.H3('Column 11'),
        dcc.Graph(id='g24', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),

    html.Div([
        html.H3('Column 12'),
        dcc.Graph(id='g25', figure={'data': [{'y': [1, 2, 3]}]})
    ], className="one columns"),    
], className="row"),

])

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

if name == ‘main’:
app.run_server(debug=True)

Great thread! Here’s a useful styleguide for Dash by Chris: https://codepen.io/chriddyp/pen/bWLwgP

Dash rocks.

1 Like

I was able to apply this method to tables which is awesome. But how exactly is this working? Can someone maybe break down the code for me so I can do a bunch more with this css sheet? I am fairly new to dash and css btw :o

Thanks in advance!

Hi @chriddyp,

Graph looks great, and I’d have expected it to work as such as well.

However, when I copy your entire code and run it, the graph appears on top of each other for me!

I’m using Chrome. Is there any settings that I have to apply in order to see it as intended?

1 Like

This example renders two vertical (instead of horizontal) graphs for me. I can’t seem to get the column/row logic to work for the life of me (not the only example that does this).

I have exactly the same issue. i copied the code as it is and the graphs appeared on next line instead of side by side… did you manage to find a solution?

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!

3 Likes

This worked perfectly! Thank you!

hi sir, i’m not getting the plots in a row. THE PLOTS appears on top of each other. please help me if you have any ideas to plot multiple plots in a single row.

did you find a solution? I’m also struck at the same issue

Hi, I see the same issue as many have mentioned, where the two graphs appear stacked on top of each other, instead of side-by-side. Did anyone figure out why that might be ?

Thanks!

Based on the information at https://codepen.io/chriddyp/pen/bWLwgP, the className="row" should be className="container". That worked for me.