Subplots within figure layout dictionary

Dash Python
1

I am trying to create two simple barcharts within one figure using the ‘grid’ dictionary within the ‘layout’ key but I can’t get the figure to make the two subplots. I have:

barchart_layout = dict(
height=550,
width=750,
grid = dict(rows=2, columns=1, xaxes=[“x”, “x2”], yaxes=[“y”, “y2”]),
)

data1 = [dict(x=[1,2,3], y=[5, 5, 5], xaxis=‘x’, yaxis=‘y’)]
data2 = [dict(x=[1,2,3], y=[5, 5, 5], xaxis=‘x2’, yaxis=‘y2’)]

figure = dict(layout = barchart_layout, data=[data1, data2])

With or without the data the figure doesn’t contain subplots so the issue lies in there but I can’t figure out which keywords I am missing. Any help would be appreciated, thanks.

2

Hi @pelliott

you can try something like this:

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

app.layout = html.Div([
    html.Div([
        dcc.Graph(
            id='subplot',
            figure = {
                'data': [
                    {'y': [1, 2, 3], 'type':'bar'},
                    {'y': [3, 2, 1], 'type': 'bar', 'xaxis': 'x2', 'yaxis': 'y2'}
                ],
                'layout': {
                    'xaxis': {'domain': [0, 0.45]},
                    'xaxis2': {'domain': [0.55,1]}
                }
            })
    ])
])

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

if __name__ == '__main__':
    app.run_server(debug=True)
3

That’s perfect, that worked for me. I’m just wondering, could you explain exactly how that solution works because it seems that somehow the axes that are made in ‘layout’ are linked to those referenced in ‘data’.

Is it that ‘xaxis’ points to ‘x’ and ‘xaxis2’ points to ‘x2’ and so on? If so, I guess the strings have to strictly be in those formats then.

Thanks again.