Here is the code of the two files, thank you for the help !
I would like to put the graph under the “# Graph one” section
Here is the HTML/CSS file :
from dash import Dash, html, dcc, dash_table
import plotly.graph_objects as go
from Models.Graphiquesfrontend import graphone
app = Dash(__name__)
#Dashboard
app.layout = html.Div(className='dashboard',style={"display":"flex","border":"1px black solid", 'width':'1850px','height':'920px'}, children=[
#---- Three left boards ----
html.Div(className='leftboard', style={"border":"1px black solid", 'width':'100%','height':'100%'}, children=[
# Board1 space
html.Div(className='board_one', style={"border":"1px black solid", 'width':'100%','height':'50%'}, children=[
html.H1("Board1"),
# Graph one
html.Div(className='graph_one', style={"display":"flex"}, children={
dcc.Graph(figure=graphone())
}),
]),
#Bottom left part
html.Div(className='board_two', style={'display':'flex',"border":"1px black solid", 'width':'100%','height':'50%'}, children=[
#Board 2 space
html.Div(className='graph_two_left',style={"border":"1px black solid", 'width':'50%','height':'100%'}, children=[
html.H1("Board2"),
]),
#Board 3 space
html.Div(className='graph_two_right',style={"border":"1px black solid", 'width':'50%','height':'100%'}, children=[
html.H1("Board3"),
])
])
]),
#---- Right board (ignore) ---
html.Div(className='rightboard', style={'width':'100%','height':'100%',"border":"1px black solid"},children=[
html.H1("Board4")
])
])
if __name__ == '__main__':
app.run_server(debug=True)
Here is the graph file:
import plotly.graph_objects as go
def graphone():
x = ['b', 'a', 'c', 'd']
fig = go.Figure(go.Bar(x=x, y=[2, 5, 1, 9], name='Montreal'))
fig.add_trace(go.Bar(x=x, y=[1, 4, 9, 16], name='Ottawa'))
fig.add_trace(go.Bar(x=x, y=[6, 8, 4.5, 8], name='Toronto'))
fig.update_layout(barmode='stack', xaxis={'categoryorder': 'category ascending'})
fig.show()
return fig