# Two graphs side by side then next row, etc

**URL:** <https://community.plotly.com/t/two-graphs-side-by-side-then-next-row-etc/7489>\
**Category:** Dash Python\
**Created:** [December 28, 2017, 9:48pm UTC](https://community.plotly.com/t/two-graphs-side-by-side-then-next-row-etc/7489 "2017-12-28T21:48:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dnaiel](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dnaiel/32/2026_2.png) [@dnaiel](https://community.plotly.com/u/dnaiel)\
**Post date:** [December 28, 2017, 9:48pm UTC](https://community.plotly.com/t/two-graphs-side-by-side-then-next-row-etc/7489/1 "2017-12-28T21:48:53Z")

</div>

Hi,

I see this post on how to create two graphs side by side: [Two graphs, side by side](https://community.plotly.com/t/two-graphs-side-by-side/5312)

Now, what happens if my app returns a list of graphs (unknown number of graphs), and I want to put them side by side two at a time, i.e.,

graph1 | graph2  
graph3 | graph4  
etc.

How can I do that in a general way?

The current code I have does not put them side by side, rather one graph per row:

```
app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Daily Charts by Region'),

    dcc.Dropdown(id='regions',
                 options=[
                     {'label': 'RM', 'value': 'RM'},
                     {'label': 'Valparaiso', 'value': 'Valparaiso'},
                     {'label': 'concepcion', 'value': 'Concepcion'}
                 ],
                 value=['RM','Valparaiso','Concepcion'],
                 multi=True
                 ),

    html.Div(id='graphs')

])

@app.callback(
    Output('graphs', 'children'),
    [Input('regions', 'value')])
def update_graph(regions):
    my_df = getMyDf()
    graphs=[]
    for region in regions:
        fig = myPlot(my_df, region)
        graphs.append(
            dcc.Graph(
                id=region,
                figure=fig
            )
        )
    return graphs
```

---

<div class="post-metadata">

**Author:** ![ericdo1810](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/ericdo1810/32/2205_2.png) [@ericdo1810](https://community.plotly.com/u/ericdo1810)\
**Post date:** [January 2, 2018, 3:17am UTC](https://community.plotly.com/t/two-graphs-side-by-side-then-next-row-etc/7489/2 "2018-01-02T03:17:21Z")

</div>

Hello, I encountered a similar problem before, here was how I roughly achieve this:

- Create a parent div to hold all the graphs (like all the lines of graphs).
- Write a for loop that starts with i = 0, i += 1 each iteration, for each iteration do:  
\*\* if i % 2 == 0, then append an empty row to the Div, append a column width 6 containing the next graph into that new row, then next.  
\*\* if i % 2 == 1, then only append the next graph within a column width 6 into the latest row.  
\*\* if i == number of graphs, break the loop.
- Return the gigantic div to render in the app.

---

<div class="post-metadata">

**Author:** ![dnaiel](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dnaiel/32/2026_2.png) [@dnaiel](https://community.plotly.com/u/dnaiel)\
**Post date:** [January 2, 2018, 10:44am UTC](https://community.plotly.com/t/two-graphs-side-by-side-then-next-row-etc/7489/3 "2018-01-02T10:44:21Z")

</div>

Hi, thanks for the response.

So, to be more specific, right now my app.callback function returns a list of dcc.Graph objects. Should I still return this?

How should the parent div look like? html.Div(id=‘graphs’, children=[here is where i write the for loop?])

---

<div class="post-metadata">

**Author:** ![mikesmith1611](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mikesmith1611/32/2130_2.png) [@mikesmith1611](https://community.plotly.com/u/mikesmith1611)\
**Post date:** [January 2, 2018, 2:08pm UTC](https://community.plotly.com/t/two-graphs-side-by-side-then-next-row-etc/7489/4 "2018-01-02T14:08:32Z")

</div>

An alternative would be to use Plotly’s subplots feature ([https://plot.ly/python/subplots/](https://plot.ly/python/subplots/)). Dash would then see this as one ‘figure’ object. You would, of course, have to adapt your myPlot function and callback to reflect those changes.

---

<div class="post-metadata">

**Author:** ![ericdo1810](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/ericdo1810/32/2205_2.png) [@ericdo1810](https://community.plotly.com/u/ericdo1810)\
**Post date:** [January 2, 2018, 3:47pm UTC](https://community.plotly.com/t/two-graphs-side-by-side-then-next-row-etc/7489/5 "2018-01-02T15:47:27Z")

</div>

Hi @dnaiel , my solution was to have the callback function return a Div in which children are rows, each row contains 2 graphs.  
So technically, if my list have 9 graphs, then my solution would be to return a Div with 5 rows in it, each row has 2 graphs in 2 columns of width 6, except for the last one which has only 1 graph.  
@mikesmith1611 suggested using subplots by Plotly, which I think would be much easier than my solution. Admittedly when I started out with Dash I didn’t know fully all the features of plotly so glad to see that they have subplots. In that case, the list of graphs would be one graph with n subplots.

---

<div class="post-metadata">

**Author:** ![jonmaestro](https://avatars.discourse-cdn.com/v4/letter/j/bb73d2/32.png) [@jonmaestro](https://community.plotly.com/u/jonmaestro)\
**Post date:** [February 19, 2018, 8:28pm UTC](https://community.plotly.com/t/two-graphs-side-by-side-then-next-row-etc/7489/6 "2018-02-19T20:28:02Z")

</div>

one reason you may prefer multiple plots to a subplot is the ease with which you can save individual graphs  
i have found trying to save 5 rows of graphs to an offline png you lose all the height dimensions set in plotly