CODEWITHSUNDEEP
pythonplotly-dash
GreenEye
GreenEye

Reputation: 163

Plotly Dash: Cannot place figure and table side by side

I am trying to place a figure and a table side-by-side but the table always shows below the figure vertically although its horizontally in the correct position. Similar code works for me if both elements are figures. Here is a minimal code example.

fig = make_subplots()
fig.add_trace(go.Scatter(x = [1,2,3], y = [1,2,3]))
df = pd.DataFrame({'col1': [1, 2, 3], 'col2': ['This is a test ', 'This is a test', 'This is a test'], 'col3': [99, 100, 101]})

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([dcc.Graph(figure = fig)], style = {'width': '49%', 'display': 'inline-block'}),
    html.Div([dt.DataTable(
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        style_table = {'height': 200, 'overflowX': 'auto'})], style = {'width': '49%', 'display': 'inline-block'}),
])

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

Here is an image of what I get: enter image description here

Upvotes: 1

Views: 2337

Answers (1)

user11989081
user11989081

Reputation: 8663

Try including the figure and table in a flex container, i.e. an html.Div() with style={'display': 'flex'}.

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
import plotly.graph_objects as go

app = dash.Dash(__name__)

app.layout = html.Div([

    # Flex container
    html.Div([

        # Graph container
        html.Div([

            dcc.Graph(figure=go.Figure(data=go.Scatter(x=[1, 2, 3], y=[1, 2, 3]), layout=dict(margin=dict(t=0, b=0, l=0, r=0))))

        ], style={'width': '49%', 'display': 'inline-block'}),

        # Table container
        html.Div([

            dt.DataTable(
                data=pd.DataFrame({'col1': [1, 2, 3], 'col2': [99, 100, 101]}).to_dict('records'),
                columns=[{'id': c, 'name': c} for c in ['col1', 'col2']],
                style_table={'height': 200, 'overflowX': 'auto'}
            )

        ], style={'width': '49%', 'display': 'inline-block'}),

    ], style={'display': 'flex'}),

])

if __name__ == '__main__':
    app.run_server(host='127.0.0.1', debug=True)

Upvotes: 5

Related Questions