Dash: Two Graphs side by side in a Dashboard

[ncdingari]

The following code diplay charts one-below-another, I want them side by side

app.layout = html.Div(children=[
    dcc.Graph(
    figure= dsf.customChart1(Data=Data, attribution=['Gender','JobType'], title='Gender Distribution'),
    style={'width': '800'}
        ),
    dcc.Graph(
    figure=dsf.customChart2(Data=Data, xd='Age',yd='Salary', attribution=['Gender','JobType'],
                     title='Some Title' , color_att=['Gender']),
            style={'width': '800'}),
], style={'width': '100%', 'display': 'inline-block'})

[nkrumm]

Hi, Something like this should do the trick for you:

app.layout = html.Div(children=[
    html.Div(
        dcc.Graph(
            figure= dsf.customChart1(Data=Data, attribution=['Gender','JobType'], title='Gender Distribution'),
            style={'width': '800'}
        ), style={'display': 'inline-block'}),
    html.Div(
        dcc.Graph(
            figure=dsf.customChart2(Data=Data, xd='Age',yd='Salary', attribution=['Gender','JobType'],
                     title='Some Title' , color_att=['Gender']),
            style={'width': '800'}
        ), style={'display': 'inline-block'})
], style={'width': '100%', 'display': 'inline-block'})

You might have to remove the style={'width': '800'}, as this will cause the elements to wrap if the display is not wide enough (i.e., greater than ~1600px + margins)

Other options would include using a the rows/columns technique of a grid layout system like Bootstrap, though this will require the addition of an additional CSS sheet.

[ncdingari]

Thank you

[songholmes]

Thank you, this really works for me

[enjineerMan]

Does this also work for html images? This is what I tried:

html.Div(
        html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()), width=400, height=300),
        style={'display': 'inline-block'}
    ),

    html.Div(id='output_container', children=[],style={'display': 'inline-block'}),
    html.Div(
        dcc.Graph(id='experimental_lakes', figure={}),
        style={'display': 'inline-block'}
    )

But my graph is still beneath my image