✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Something went wrong with axes scaling

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!