I am trying to create a Dash dashboard with two plotly graphs side by side and one under them. Here is the code:
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import dash_bootstrap_components as dbc
import numpy as np
import pandas as pd
np.random.seed(2)
df1 = pd.DataFrame(columns=['A', 'B', 'C'], data=np.random.rand(5,3))
df2 = pd.DataFrame(columns=['A', 'B', 'C'], data=np.random.rand(5,3))
df3 = pd.DataFrame(columns=['A', 'B', 'C'], data=np.random.rand(5,3))
def create_fig(df):
data = go.Table(
header=dict(
values=[str(i) for i in df.columns],
align='center'
),
cells=dict(
values=df,
align = "left",
height=45
)
)
layout = dict(
showlegend=False,
width=200
)
return dict(data=[data], layout=layout)
app = dash.Dash(external_stylesheets=['https://codepen.io/amyoshino/pen/jzXypZ.css'])
app.layout = html.Div([
html.Div(
className="row",
children=[
html.Div(
className="six columns",
children=[
html.Div(
children=dcc.Graph(id='left-top', figure=create_fig(df1))
)
]
),
html.Div(
className="six columns",
children=html.Div(
children=dcc.Graph(id='right-top', figure=create_fig(df2)),
)
)
]
),
html.Div(
className="row",
children=[
html.Div(
className="twelve columns",
children=[
html.Div(
children=dcc.Graph(id='bottom-bar-graph', figure=create_fig(df3))
)
]
)
]
)
])
if __name__ == '__main__':
app.run_server()
I've tried a few different proposed solutions, but haven't had any success yet. I've tried changing the width and height in the layout of the figures as well. Tried solution 1 Tried solution 2
