Callback error when creating a dashboard using dash

Question

I am trying to build an interactive dashboard using dash. I would like to show a scatterplot with each plot representing a fighter, the y axis the number of fights won and the x-axis the number of fights fought.

I want to allow users to select different divisions with a multi-dropdown arrow (to select one or multiple divisions).

With some online help, this is what I have come up with:

data['bouts_fought'] = data['w'].astype('float')+data['l'].astype('float')+data['d'].astype('float')
WEIGHT_CLASS = data['division'].unique()
app = dash.Dash()
app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
# layout
app.layout = html.Div(children=[
    html.H1(children='Visualizing boxer stats', style={
        'textAlign': 'center',
    }),
    dcc.Dropdown(
        id='weight_class',
        options=[{'label': i, 'value': i} for i in data['division'].unique()],
        multi=True
    ),
    dcc.Graph(
        id='total-bouts-v-bouts-won',
    )
])
@app.callback(
    dash.dependencies.Output('total-bouts-v-bouts-won', 'figure'),
    [dash.dependencies.Input('weight_class', 'value')])
def update_scatterplot(weight_class):
    if weight_class is None or weight_class == []:
        weight_class = WEIGHT_CLASS

    weight_df = data[(data['division'].isin(weight_class))]
    return {
        'data': [
            go.Scatter(
                x=weight_df['bouts_fought'],
                y=weight_df['w'],
                text=weight_df['name'],
                mode='markers',
                opacity=0.5,
                marker={
                    'size': 14,
                    'line': {'width': 0.5, 'color': 'blue'}
                },
            )
        ],
        'layout': go.Layout(
            xaxis={'title': 'Bouts fought'},
            yaxis={'1': 40, 'b': '40', 't': 10, 'r': 10},
            legend={'x': 0, 'y': 1},
            hovermode='closest'
        )
    }
if __name__ == '__main__':
    app.run_server(debug=True)

However, when I try and run this app, I get these warning messages:

options[14].label in Dropdown with ID "weight_class" is required but it was not provided. Callback error updating

total-bouts-v-bouts-won.figure ValueError: Invalid properties specified for object of type plotly.graph_objs.layout.YAxis: ('1', 'b', 't', 'r')

Here is a sample of my data:

{'name': {0: 'Roberto Salas',
  3: 'James Jackson',
  6: 'Alex Love',
  9: 'Juan Centeno',
  12: 'Jordan Weeks'},
 'division': {0: 'cruiser',
  3: 'heavy',
  6: 'bantam',
  9: 'fly',
  12: 'super middle'},
 'w': {0: 5.0, 3: 4.0, 6: 3.0, 9: 4.0, 12: 2.0},
 'l': {0: 0.0, 3: 0.0, 6: 0.0, 9: 3.0, 12: 0.0},
 'd': {0: 0.0, 3: 1.0, 6: 0.0, 9: 1.0, 12: 0.0},
 'location': {0: 'USA', 3: 'USA', 6: 'USA', 9: 'USA', 12: 'USA'},
 'from': {0: 2016.0, 3: 2017.0, 6: 2018.0, 9: 2016.0, 12: 2019.0},
 'sex': {0: 'male', 3: 'male', 6: 'female', 9: 'male', 12: 'male'}}

I updated my code based on the answer given, but still getting this error message:

Error: options[14].label in Dropdown with ID "weight_class" is required but it was not provided.

    at propTypeErrorHandler (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_2_0m1574163797.dev.js:33569:9)

    at CheckedComponent (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_2_0m1574163797.dev.js:30047:77)

    at renderWithHooks (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/[email protected]_2_0m1574163797.8.6.js:13073:18)

    at mountIndeterminateComponent (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/[email protected]_2_0m1574163797.8.6.js:15155:13)

    at beginWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/[email protected]_2_0m1574163797.8.6.js:15760:16)

    at performUnitOfWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/[email protected]_2_0m1574163797.8.6.js:19447:12)

    at workLoop (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/[email protected]_2_0m1574163797.8.6.js:19487:24)

    at renderRoot (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/[email protected]_2_0m1574163797.8.6.js:19570:7)

    at performWorkOnRoot (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/[email protected]_2_0m1574163797.8.6.js:20477:7)

    at performWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/[email protected]_2_0m1574163797.8.6.js:20389:7)

chris chris · Accepted Answer · 2019-11-19T16:41:37

The error

total-bouts-v-bouts-won.figure ValueError: Invalid properties specified for object of type plotly.graph_objs.layout.YAxis: ('1', 'b', 't', 'r')

is because of your layout definition:

    'layout': go.Layout(
        xaxis={'title': 'Bouts fought'},
        yaxis={'1': 40, 'b': '40', 't': 10, 'r': 10},
        legend={'x': 0, 'y': 1},
        hovermode='closest'
    )

Not sure what you're trying to do with yaxis={'1': 40, 'b': '40', 't': 10, 'r': 10} but 1,b,t,r are not valid properties. You can see a full list of valid properites for the yaxis dictionary with print(go.Layout.yaxis.__doc__).

If I remove the yaxis from your layout dictionary, the app runs with your sample data with no errors and the graph updates when I select items in the drop down. I didn't see the first error (options[14].label in Dropdown...) at any point.

Callback error when creating a dashboard using dash

1 Answers