Black Lives Matter. Please consider donating to Black Girls Code today.

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

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

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.

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