How to create a page with n-by-m graphs in dash

Dash Python
1

I am trying to create a page with n by m identically sized graphs. I can create n by 2 but as soon as I add more columns, the graphs start to overlap and/or get pushed into the next row.
The way I am placing charts next to each other is by giving them the layout ‘display’: ‘inline-block’ and making them children of the same parent. So for one row I would have

html.Div([
    html.Div(dcc.Graph(id="g1", figure = getFig(1), style={'display': 'inline-block', width': '...'}),
    html.Div(dcc.Graph(id="g2", figure = getFig(2), style={'display': 'inline-block', width': '...'}),
    ...
    html.Div(dcc.Graph(id="gn", figure = getFig(n), style={'display': 'inline-block', width': '...'}),
])

I changed the width parameters giving it either %values that would aggregate to less than 100 or absolute values that would be less than the width of the container, but none of that fixed the overlapping

2

You should use the width property with percentage according to the number of columns.

elem_with = 100 / m

html.Div([
    html.Div(dcc.Graph(id="g1", figure = getFig(1), style={'width':'100%'}), style={'display': 'inline-block', 'width': '{}%'.format(elem_width)},
    html.Div(dcc.Graph(id="g2", figure = getFig(2), style={'width':'100%'}), style={'display': 'inline-block', 'width': '{}%'.format(elem_width)}),
    ...
    html.Div(dcc.Graph(id="gn", figure = getFig(n), style={'width':'100%'}),style={'display': 'inline-block', 'width': '{}%'.format(elem_width)},
])

and inside the figure width property, use 100%. It will adjust its parent.

3

thanks for your reply. When I use your example (and close the missing braces at the end of the line of figure 1 and figure n, it spaces out the columns

@app.callback(dd.Output('test', 'children'), dependencies)
def update_graph(*args):

    elem_width = 100/3

    return html.Div([
        html.Div(dcc.Graph(id="g1", figure = getFig(1), style={'width':'100%'}), style={'display': 'inline-block', 'width': '{}%'.format(elem_width)}),
        html.Div(dcc.Graph(id="g2", figure =  getFig(2), style={'width':'100%'}), style={'display': 'inline-block', 'width': '{}%'.format(elem_width)}),
        html.Div(dcc.Graph(id="gn", figure =  getFig(3), style={'width':'100%'}), style={'display': 'inline-block', 'width': '{}%'.format(elem_width)}),
        ])

However the figures themselves are squashed together completely. Essentially, only the y axis is displayed. I can extend them again by setting figure width to values > 100%, however, they will overlap again when they are fully displayed