Cannot read properties of null (reading 'layout')

📊 Plotly Python
1

When I run the below code it loads the web, but then it leaves an error message, it is because in some section there is no data?

image
image739×862 46.4 KB 


import dash
from dash import dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
from dash import html
import plotly.graph_objects as go
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

df = pd.read_csv(r'C:\Users\akhil\Downloads\top_banks_tier_1.csv',index_col=0)

# creating app layout
app.layout = html.Div([
    html.Div([dcc.Dropdown(id='tier_dropdown', options=[{'label': 'Tier 1',
             'value': 'Tier 1'}, {'label': 'Tier 2',
                      'value': 'Tier 2'}, {'label': 'Tier 3',
                               'value': 'Tier 3'}, {'label': 'Tier 4',
                                        'value': 'Tier 4'}, {'label': 'Tier 5',
                                                 'value': 'Tier 5'}])], style={
        'marginTop': 25,
        'align-items': 'center',
        'width': '30%',
        'display': 'inline-block',
        'paddingRight': 10,
        'font-size':15,
        }),
        dbc.Container([
            dbc.Card([
                    dbc.Button('🡠', id='back-button', outline=True, size="sm",
                                className='mt-2 ml-2 col-1', style={'display': 'none'}),
                    dbc.Row(
                        dcc.Graph(id="graph", figure= {'data': [go.Bar(
                        x = df['Bank'],  # our "jittered" data
                        y = df['Rank'],
                        text = df['Rank'],
                        # hoverinfo = ['Rank'],
                        )],
                        'layout': go.Layout(
                        title = 'Banks in Tier-1',
                        xaxis = {'title': 'Rank'},
                        yaxis = {'title': 'Name of the Bank', 'categoryorder':'min descending'},
                        )
                        }
                    ))
            ], style={"width": '150%'})
    ])
])

#Callback
@app.callback(
    Output('graph', 'figure'),
    # Output('back-button', 'style'), #to hide/unhide the back button
    [Input('graph', 'clickData'),    #for getting the vendor name from graph
    Input('back-button', 'n_clicks'),
    Input('tier_dropdown', 'value')]
)
def drilldown(click_data,n_clicks,tier_dropdown):
    if tier_dropdown == 'Tier 1':
        df = pd.read_csv(r'C:\Users\akhil\Downloads\top_banks_tier_1.csv',index_col=0)
        figure = {'data': [go.Bar(
                x = df['Bank'],  # our "jittered" data
                y = df['Rank'],
                text = df['Bank'],
                # hoverinfo = ['Rank'],
                )],
                'layout': go.Layout(
                title = 'Banks in Tier-1 updated',
                xaxis = {'title': 'Rank'},
                yaxis = {'title': 'Name of the Bank', 'categoryorder':'min descending'},
                )
            }
        print("Tier 1")
        return figure

    elif tier_dropdown == 'Tier 2':
    print('pass 2')

    elif tier_dropdown == 'Tier 3':
    print('pass 3')

    elif tier_dropdown == 'Tier 4':
    print('pass 4')

    else:
    print('pass 5')


if __name__ == '__main__':
app.run_server(debug=True)