# Two graphs, side by side

**URL:** <https://community.plotly.com/t/two-graphs-side-by-side/5312>\
**Category:** Dash Python\
**Created:** [August 9, 2017, 5:46pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312 "2017-08-09T17:46:37Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![paul.larsen](https://avatars.discourse-cdn.com/v4/letter/p/838e76/32.png) [@paul.larsen](https://community.plotly.com/u/paul.larsen)\
**Post date:** [August 9, 2017, 5:46pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/1 "2017-08-09T17:46:37Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [August 9, 2017, 7:04pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/2 "2017-08-09T19:04:20Z")

</div>

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

```auto
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)

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/315406822995abe6ebfc2b34e83e54ea4cfdf734.png)

---

<div class="post-metadata">

**Author:** ![paul.larsen](https://avatars.discourse-cdn.com/v4/letter/p/838e76/32.png) [@paul.larsen](https://community.plotly.com/u/paul.larsen)\
**Post date:** [August 10, 2017, 8:58am UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/3 "2017-08-10T08:58:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Randy](https://avatars.discourse-cdn.com/v4/letter/r/2acd7d/32.png) [@Randy](https://community.plotly.com/u/Randy)\
**Post date:** [May 10, 2018, 12:23pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/4 "2018-05-10T12:23:56Z")

</div>

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](https://codepen.io/chriddyp/pen/bWLwgP.css)’  
> })
> 
> if name == ‘main’:  
> app.run\_server(debug=True)

---

<div class="post-metadata">

**Author:** ![roman](https://avatars.discourse-cdn.com/v4/letter/r/ed8c4c/32.png) [@roman](https://community.plotly.com/u/roman)\
**Post date:** [May 11, 2018, 6:04am UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/5 "2018-05-11T06:04:19Z")

</div>

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](https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp)

---

<div class="post-metadata">

**Author:** ![Randy](https://avatars.discourse-cdn.com/v4/letter/r/2acd7d/32.png) [@Randy](https://community.plotly.com/u/Randy)\
**Post date:** [May 11, 2018, 8:05pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/6 "2018-05-11T20:05:27Z")

</div>

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](https://codepen.io/chriddyp/pen/bWLwgP.css)’  
> })
> 
> if name == ‘main’:  
> app.run\_server(debug=True)

---

<div class="post-metadata">

**Author:** ![pkstacey](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@pkstacey](https://community.plotly.com/u/pkstacey)\
**Post date:** [November 6, 2018, 11:04am UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/7 "2018-11-06T11:04:34Z")

</div>

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

Dash rocks.

---

<div class="post-metadata">

**Author:** ![Nathaniel3133](https://avatars.discourse-cdn.com/v4/letter/n/d07c76/32.png) [@Nathaniel3133](https://community.plotly.com/u/Nathaniel3133)\
**Post date:** [March 13, 2019, 3:24am UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/8 "2019-03-13T03:24:08Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![etjkai](https://avatars.discourse-cdn.com/v4/letter/e/45deac/32.png) [@etjkai](https://community.plotly.com/u/etjkai)\
**Post date:** [December 20, 2019, 12:44pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/11 "2019-12-20T12:44:18Z")

</div>

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?

 ![](https://i.imgur.com/WdYJJp3.png)

---

<div class="post-metadata">

**Author:** ![woodrujm](https://avatars.discourse-cdn.com/v4/letter/w/e0b2c6/32.png) [@woodrujm](https://community.plotly.com/u/woodrujm)\
**Post date:** [March 21, 2020, 3:50pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/12 "2020-03-21T15:50:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![faheemminhas](https://avatars.discourse-cdn.com/v4/letter/f/aca169/32.png) [@faheemminhas](https://community.plotly.com/u/faheemminhas)\
**Post date:** [May 14, 2020, 1:45am UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/13 "2020-05-14T01:45:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Phongnguyen](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@Phongnguyen](https://community.plotly.com/u/Phongnguyen)\
**Post date:** [June 3, 2020, 3:54pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/14 "2020-06-03T15:54:27Z")

</div>

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:

```auto
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash( __name__ , external_stylesheets=external_stylesheets) 

```

Hope can help you!

---

<div class="post-metadata">

**Author:** ![zaz](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zaz](https://community.plotly.com/u/zaz)\
**Post date:** [October 21, 2020, 1:29pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/15 "2020-10-21T13:29:11Z")

</div>

This worked perfectly! Thank you!

---

<div class="post-metadata">

**Author:** ![sriramya\_nataraj](https://avatars.discourse-cdn.com/v4/letter/s/46a35a/32.png) [@sriramya\_nataraj](https://community.plotly.com/u/sriramya_nataraj)\
**Post date:** [November 29, 2020, 8:54am UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/16 "2020-11-29T08:54:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sriramya\_nataraj](https://avatars.discourse-cdn.com/v4/letter/s/46a35a/32.png) [@sriramya\_nataraj](https://community.plotly.com/u/sriramya_nataraj)\
**Post date:** [November 30, 2020, 5:55am UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/17 "2020-11-30T05:55:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![arunamazon11](https://avatars.discourse-cdn.com/v4/letter/a/a587f6/32.png) [@arunamazon11](https://community.plotly.com/u/arunamazon11)\
**Post date:** [January 11, 2021, 1:08am UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/18 "2021-01-11T01:08:27Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![lnguyen7](https://avatars.discourse-cdn.com/v4/letter/l/b19c9b/32.png) [@lnguyen7](https://community.plotly.com/u/lnguyen7)\
**Post date:** [April 11, 2021, 4:49pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/19 "2021-04-11T16:49:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maartenbreddels](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/maartenbreddels/32/28524_2.png) [@maartenbreddels](https://community.plotly.com/u/maartenbreddels)\
**Post date:** [November 4, 2024, 2:46pm UTC](https://community.plotly.com/t/two-graphs-side-by-side/5312/20 "2024-11-04T14:46:49Z")

</div>

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

```auto
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](https://py.cafe/maartenbreddels/dash-two-graphs-side-by-side) 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:

> **[PyCafe - Dash - Side-by-Side Graph Visualization using Bootstrap](https://py.cafe/maartenbreddels/dash-two-graphs-side-by-side-dbc#)**
>
> Create & Share Streamlit, Dash and Python Apps Online.