Two graphs side by side then next row, etc

Dash Python
1

Hi,

I see this post on how to create two graphs side by side: Two graphs, side by side

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
2

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.
1 Like
3

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?])

4

An alternative would be to use Plotly’s subplots feature (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.

3 Likes
5

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.

2 Likes
6

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