CODEWITHSUNDEEP
pythonjupyter-notebookplotly-dash
Tyrese
Tyrese

Reputation: 13

Layout must be a dash component?

I keep getting the error "Layout must be a dash component or a function that returns a dash component." but I cannot seem to pinpoint where the mistake is.I tried separating the app.run into another run block (using jupyter notebook) but didn't seem to work.

app = dash.Dash(__name__)
    
    app.layout= html.Div(
            children=[
                html.Div(children=[
                    dcc.Dropdown(id='dropdown1',
                              options=[
                                  {'value':x,'label':x} 
                                       for x in df['Census Block Tract']],
                              clearable=False,
                              value='MLK Jr Blvd (Detroit)',
                              ),
                    dcc.Dropdown(id='dropdown2',
                             options=[
                                      {'label':'Median Household Income','value':'Median Household Income'},
                                      {'label':'Average Home Value','value':'Average Home Value'}],
                             clearable=False,
                             value='Median Household Income',                   
                             )
                    ], className='menu-l'
                    ),
                dcc.Graph(id='interaction2',
                          config={'displayModeBar':False},
                          className='card')
                ]
),
@app.callback(
    Output('interaction2', 'figure'),
    [Input('dropdown1','value'),
     Input('dropdown2','value')]
    )

def update_pie_chart(select_d1,select_d2):
    df3=df.loc[df['Census Block Tract']==select_d1]
    
    ## using dash to make the pie chart
    fig1=go.Figure(data=[go.Pie(labels=df3[select_d2].value_counts().index.tolist(),
                         values=list(df3[select_d2].value_counts()))])
    
    ## customizing the title of the pie chart
    names={'Median Household Income':'Median Household Income','Average Home Value':'Average Home Value'}
    title_att=names.get(select_d2)
    #fig1.update_layout(title=
        #     f"{title_att} of Confirmed Covid-19 Cases in {select_d1}"
     #                  " province")
    return fig1  # return fig1 #to be outputted!

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

Upvotes: 1

Views: 2598

Answers (1)

coralvanda
coralvanda

Reputation: 6606

The problem is that your layout is a tuple, because it ends with a comma. If we take out the children, what you have is:

layout = html.Div(),

Which creates a tuple. Just remove the comma and it should work.

Upvotes: 2

Related Questions