Two graphs, side by side

#1

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!

Two graphs side by side then next row, etc
Two tables side by side
#2

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)

2 Likes
How can get embed? offline
Control Number of Columns Inside Tabs
How to arrange input box & button
#3

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

1 Like
#4

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)

#5

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

#6

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)

#7

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

Dash rocks.

1 Like
#8

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!