'Second graph on the same page with dash and styling specific elements with external stylesheet
I am having trouble fitting two graphs onto one page in dash-plotly. When using code attached below only the top plot is being displayed. Besides that, I do not fully understand styling with CSS and I would be over the moon if someone could explain to me that in the below code( how to address particular elements from the page in external CSS)
from dash import html, dcc
import plotly.express as px
from app import app
from data import Rejects1
from navbar import create_navbar
df = Rejects1.dfrj
nav = create_navbar()
colors = {
'background': '#ededed',
'text': '#0b1710'
}
fig = px.bar(df, x="date", y="amount", color="reject_type", barmode="group", labels={
"date": "Day",
"amount": "Amount",
"reject_type": "Reject Type",
})
fig2 = px.bar(df, x="date", y="amount", barmode="group", labels={
"date": "Day",
"amount": "Amount"
})
def create_rejects1():
layout = html.Div(style={'backgroundColor': colors['background']},
children=[nav,
html.Div(children='Rejects this year', style={
'textAlign': 'center',
'color': colors['text'],
'fontFamily': "Times New Roman"
}),
dcc.Graph(
id='example-graph-2',
figure=fig
)
]),
# This plot is not being displayed
html.Div(children=[html.Div(children='Rejects ', style={
'textAlign': 'center',
'color': colors['text'],
'fontFamily': "Times New Roman"
}),
dcc.Graph(
id='2',
figure=fig2
)
])
return layout
fig.update_layout(
plot_bgcolor=colors['background'],
paper_bgcolor=colors['background'],
font_color=colors['text']
)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
