Hi,
I made my graphs responsive instead of fixed width and height but sometime the graph only shows the x-axes and gives the error 'something went wrong with axes scaling.
Below some code:
holland = html.Div(id= 'holland_graph')
card3 = Card('', holland)
hollandline = html.Div(id= 'holland_lineplot')
card4 = Card('', hollandline)
provincieplot = html.Div(id= 'PieChart')
card5 = Card('', provincieplot)
provinciebar = html.Div(id= 'BarChart')
card6 = Card('', provinciebar)
def Card(text, Children, Header= False):
if Header:
card_content = [
html.Div(dbc.CardHeader(text), style= {"color": "#2E8B57", 'font-size': 20, 'font-weight': 'bold'}),
dbc.CardBody(
[
html.Div(
dbc.Row(dbc.Col(Children))
),
]
),
]
else:
card_content = [
dbc.CardBody(
[
html.Div(
Children
),
]
),
]
return card_content
layout = html.Div([
dbc.Row([
dbc.Col(dbc.Card(card1, color='light', outline=True)),
dbc.Col(dbc.Card(card2, color='light', outline=True))
]),
dbc.Row([
dbc.Col(dbc.Card(card3, color='light', outline=True)),
dbc.Col(dbc.Card(card4, color= 'light', outline= True))
]),
html.Br(),
dbc.Row([
dbc.Col(dbc.Card(card6, color= 'light', outline= True)),
dbc.Col(dbc.Card(card5, color= 'light', outline= True))
])
])
@app.callback(
Output('holland_graph', 'children'),
[Input('period', 'value'),
Input('var', 'value')]
)
def show_table(value, var):
max_val = 0
for key, items in df.items():
if max(items[var]) > max_val:
max_val = max(items[var])
fig = px.choropleth(df[value], geojson=gj,
locations='Gemeente', color= var,
color_continuous_scale="Greens",
range_color= (0, max_val // 2),
labels={var: labels[var]},
featureidkey='properties.statnaam'
)
fig.update_geos(fitbounds="locations", visible=False)
fig.update_layout(autosize= True,
coloraxis=dict(colorbar_x= -0.05,
colorbar_y= 0.5,
colorbar_len=0.75,
colorbar_thickness=20))
return dcc.Graph(id= 'provinces', figure= fig, responsive = True,)
@app.callback(
Output('holland_lineplot', 'children'),
[Input('var', 'value'),
Input('period', 'value')]
)
def lineplot(var, period):
y = []
x = []
color = []
huidig = ''
for key, item in df.items():
x.append(key)
y.append(sum(item[var]))
if key == period:
color.append(0)
huidig = sum(item[var])
else:
color.append(1)
colorscale = [[0, 'red'], [1, "#2E8B57"]]
fig = go.Figure(data=go.Scatter(x=x, y=y,
marker={'color': color,
'colorscale': colorscale,
'size': 10
},
line= {'color': "#2E8B57"}
))
fig.update_layout(title={
'text': f'<b>{period}: {int(huidig)} {labels[var]}<b>',
'y':0.9,
'x':0.5,
'xanchor': 'center',
'yanchor': 'top',
'font': dict(
size= 20,
color= "#2E8B57"
)},
autosize= True,
font = {'color': "#2E8B57"},
xaxis=dict(showgrid=False, zeroline= False, showline= True, linecolor="#2E8B57"),
yaxis=dict(showgrid=False, zeroline= False, showline= True, linecolor= "#2E8B57"),
plot_bgcolor = 'white',
)
fig.add_shape(
dict(
name= 'Opschaling testen',
type= 'line',
xref="x",
yref="paper",
x0= 10,
y0=0.01,
x1= 10,
y1= 0.95,
line=dict(
color="DarkBlue",
width= 1.5,
dash= 'dot'
),
)
)
return dcc.Graph(id='lineplotholland', figure=fig, responsive = True,)
@app.callback(
Output('PieChart', 'children'),
[Input('var', 'value'),
Input('period', 'value')]
)
def piechart(var, period):
dff = df[period]
fig = px.pie(dff, values= var, names= 'Provincienaam', hole= .3, labels= {var: labels[var]},
color_discrete_sequence=px.colors.sequential.Greens)
fig.update_layout(
title={
'text': f'<b>{period}: {labels[var]}<b>',
'y': 1,
'x': 0.5,
'xanchor': 'center',
'yanchor': 'top',
'font': dict(
size=20,
color="#2E8B57"
)},
autosize= True)
return dcc.Graph(id= 'PieProv', figure= fig, responsive = True,)
@app.callback(
Output('BarChart', 'children'),
[Input('var', 'value'),
Input('period', 'value')]
)
def piechart(var, period):
dff = df[period]
fig = px.bar(dff, x= "Provincienaam", y= var, labels= {var: labels[var]})
fig.update_layout(
title={
'text': f'<b>{period}: {labels[var]}<b>',
'y': 1,
'x': 0.5,
'xanchor': 'center',
'yanchor': 'top',
'font': dict(
size=20,
color="#2E8B57"
)},
font={'color': "#2E8B57"},
xaxis=dict(showgrid=False, zeroline=False, showline=True, linecolor="#2E8B57"),
yaxis=dict(showgrid=False, zeroline=False, showline=True, linecolor="#2E8B57"),
plot_bgcolor='white',
autosize= True,
)
fig.update_traces(marker_color= "#2E8B57")
return dcc.Graph(id= 'BarProv', figure= fig, responsive = True,)
Thanks!