Two graphs, side by side

paul.larsen · August 9, 2017, 5:46pm

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!

chriddyp · August 9, 2017, 7:04pm

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)

paul.larsen · August 10, 2017, 8:58am

Wow, thank you! This is exactly what I needed, and works exactly like I wanted it to!
(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!)

Randy · May 10, 2018, 12:23pm

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)

roman · May 11, 2018, 6:04am

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

Randy · May 11, 2018, 8:05pm

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)

pkstacey · November 6, 2018, 11:04am

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

Dash rocks.

Nathaniel3133 · March 13, 2019, 3:24am

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!

etjkai · December 20, 2019, 12:44pm

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?

woodrujm · March 21, 2020, 3:50pm

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

faheemminhas · May 14, 2020, 1:45am

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?

Phongnguyen · June 3, 2020, 3:54pm

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!

zaz · October 21, 2020, 1:29pm

This worked perfectly! Thank you!

sriramya_nataraj · November 29, 2020, 8:54am

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.

sriramya_nataraj · November 30, 2020, 5:55am

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

arunamazon11 · January 11, 2021, 1:08am

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!

lnguyen7 · April 11, 2021, 4:49pm

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

maartenbreddels · November 4, 2024, 2:46pm

Correcting and modernizing the original code with the suggestions above, I get

import dash
from dash import dcc, html

# example for https://community.plotly.com/t/two-graphs-side-by-side/5312

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(external_stylesheets=external_stylesheets)
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="does-not-matter-can-be-container")
])

The row CSS class does not do much, and although you can put container as a classname, it also is not needed, but it will make the plots show below each other below 550px width.

I’ve put this example at PyCafe - Dash - Side-by-Side Graph Visualization so it’s easy to edit and fiddle with.

Also, dash-bootstrap-components has support for grids, so the equivalent of the above example in dbc is:

Topic		Replies	Views
Side by side chart Dash Python	0	495	May 10, 2020
Showing elements side by side in Dash Python Dash Python	2	1078	November 26, 2021
3 graphs in same row Dash Python	0	1058	April 8, 2020
Display Graphs side by side in a 2x2 grid (2 columns and 2 rows) Dash Python	1	887	May 2, 2024
Graphs Side by Side Dash Python	2	1174	May 14, 2020

Two graphs, side by side

Related topics