Invalid prop for this component

Question

I'm running this app using Python Dash .I keep getting this error even though the app is loading for me perfectly. Can you please help me spot where I'm going wrong?

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objects as go
from dash.dependencies import Input, Output
import plotly.express as px


df = px.data.tips()

sales1 = pd.read_csv("sales_data_sample.csv", encoding='unicode_escape')

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        html.Label('Process Monitoring Dashboard',style={'font-size':'25px','color':'blue','margin-left': '50%'},id='w_countries')
       ]),
    
    html.P("Process End Date",style={'margin-left': '10%'}),
    dcc.Dropdown(
        id='ped', 
        value='-Select Process End Date', 
        options=[{'value': x, 'label': x} 
                 for x in ['2021', '2022', '2023', '2024']],
        clearable=False,
        style={'width': '30%','margin-left': '10%'}
    ),
    html.P("User Or Role",style={'margin-left': '10%'}),
    dcc.Dropdown(
        id='uor', 
        value='-Select User Or Role', 
        options=[{'value': x, 'label': x} 
                 for x in ['Admin', 'Guest User']],
        clearable=False,
        style={'width': '30%','margin-left': '10%'}
    ),
    html.P("Process Start Date",style={'margin-left': '10%'}),
    dcc.Dropdown(
        
        id='psd', 
        value='-Select Process Start Date', 
        options=[{'value': x, 'label': x} 
                 for x in ['2021', '2022', '2023', '2024']],
        clearable=False,
        style={'width': '30%','margin-left': '10%'}
    ),
    html.P("Process",style={'margin-left': '10%'}),
    dcc.Dropdown(
        
        id='p', 
        value='-Select Process', 
        options=[{'value': x, 'label': x} 
                 for x in ['Disputed','In Process','On Hold','Resolved','Cancelled']],
        clearable=False,
        style={'width': '30%','margin-left': '10%'}
    ),
    # Create pie chart 
    html.Div([
    html.Br(),
    dcc.Graph(id='pie',
              config={'displayModeBar': 'hover'}),
 
        ],style={'margin-left': '1.4%', 'width': '50%', 'display': 'inline-block'}),
    # Create horizontal bar chart (top 10 countries)
    html.Div([
    html.Br(),
    dcc.Graph(id='top_10',
              config={'displayModeBar': 'hover'}),
 
        ], style={'width': '48.6%', 'display': 'inline-block', 'float': 'right'})
])

@app.callback(Output('pie', 'figure'),
              [Input('w_countries', 'value')])
def display_content(w_countries):
    Cancelled = sales1.loc[sales1['STATUS'] == 'Cancelled'].count()[0]
    Disputed = sales1.loc[sales1['STATUS'] == 'Disputed'].count()[0]
    In_Process = sales1.loc[sales1['STATUS'] == 'In Process'].count()[0]
    On_Hold = sales1.loc[sales1['STATUS'] == 'On Hold'].count()[0]
    Resolved = sales1.loc[sales1['STATUS'] == 'Resolved'].count()[0]
    Shipped = sales1.loc[sales1['STATUS'] == 'Shipped'].count()[0]
 
    return {
        'data': [go.Pie(labels=['Cancelled', 'Disputed', 'In Process', 'On Hold', 'Resolved', 'Shipped'],
                        values=[Cancelled, Disputed, In_Process, On_Hold, Resolved, Shipped],
                        hoverinfo='label+value+percent',
                        textinfo='label+value',
                        textposition='auto',
                        textfont=dict(size=13),
                        insidetextorientation='radial',
                        rotation=70,
 
                        )],
 
        'layout': go.Layout(
            width=780,
            height=520,
            hovermode='closest',
            title={
                'text': 'Instance By Process',
                'y': 0.93,
                'x': 0.43,
                'xanchor': 'center',
                'yanchor': 'top'},
            titlefont={'family': 'Oswald',
                   'color': 'rgb(230, 34, 144)',
                   'size': 25},
            legend={
                'orientation': 'h',
                'bgcolor': 'rgba(255,255,255,0)',
                'xanchor': 'center', 'x': 0.5, 'y': -0.05},
            ),
 
 
        }
# Create horizontal bar chart (top 10 countries)
@app.callback(Output('top_10', 'figure'),
              [Input('w_countries', 'value')])
def update_graph(w_countries):
    top_countries = sales1.groupby(['COUNTRY'])[['SALES', 'QUANTITYORDERED']].sum().sort_values(by=['SALES'], ascending=False).nlargest(10, columns=['SALES']).reset_index()
 
 
    return {
        'data': [go.Bar(x=top_countries['SALES'],
                            y=top_countries['COUNTRY'],
                            text=top_countries['SALES'],
                            texttemplate='%{text:.2s}',
                            textposition='inside',
                            marker=dict(
                                color=top_countries['SALES'],
                                colorscale='portland',
                                showscale=False),
                            orientation='h',
                            hoverinfo='text',
                            hovertext=
                            '<b>Country</b>: ' + top_countries['COUNTRY'].astype(str) + '<br>' +
                            '<b>Sales</b>: $' + [f'{x:,.0f}' for x in top_countries['SALES']] + '<br>' +
                            '<b>Q.Ordered</b>: $' + [f'{x:,.0f}' for x in top_countries['QUANTITYORDERED']] + '<br>'
                            
                           )],
 
 
 
        'layout': go.Layout(
             width=780,
             height=520,
             # plot_bgcolor='rgb(250, 242, 242)',
             # paper_bgcolor='rgb(250, 242, 242)',
             title={
                'text': 'Top 10 Countries with active customers',
                'y': 0.93,
                'x': 0.43,
                'xanchor': 'center',
                'yanchor': 'top'},
             titlefont={'family': 'Oswald',
                        'color': 'rgb(230, 34, 144)',
                        'size': 25},
 
             hovermode='closest',
 
             xaxis=dict(title='<b>Sales</b>',
 
                        color='rgb(230, 34, 144)',
                        showline=True,
                        showgrid=True,
                        showticklabels=True,
                        linecolor='rgb(104, 204, 104)',
                        linewidth=2,
                        ticks='outside',
                        tickfont=dict(
                            family='Arial',
                            size=12,
                            color='rgb(17, 37, 239)'
                        )
 
                ),
 
             yaxis=dict(title='<b>Country</b>',
                        autorange='reversed',
                        color='rgb(230, 34, 144)',
                        showline=True,
                        showgrid=False,
                        showticklabels=True,
                        linecolor='rgb(104, 204, 104)',
                        linewidth=2,
                        ticks='outside',
                        tickfont=dict(
                           family='Arial',
                           size=12,
                           color='rgb(17, 37, 239)'
                        )
 
                )
 
        )
    }

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

And this is my error

Invalid prop for this component Property "value" was used with component ID: "w_countries" in one of the Input items of a callback. This ID is assigned to a dash_html_components.Label component in the layout, which does not support this property. This ID was used in the callback(s) for Output(s): pie.figure top_10.figure

Answer 1

You've told Dash to use the value from a Label component as an input for your callback. But Label doesn't have a value, and it isn't interactive like that. You need to use a different input for that callback.