Error updating graph invalid component prop figure

Dash Python
1

Hi,
Just creating a simple Graph, from an excel file, it loads correctly but at the moment of updating the graph dash gives back this error:
Failed component prop type: Invalid component prop figure key props supplied to Graph.
Bad object: {
“props”: {
“id”: “average_country”,
“figure”: {
“data”: [
{
“x”: [
“DE”,
“ES”,
“FR”,
“IT”,
“UK”
],
“y”: [
[
2365.56,
4528.33875,
4851.085,
4325.14,
2107.921428571429
]
],
“type”: “bar”
}
],
“layout”: {
“title”: “Hyperzone”
}
}
},
“type”: “Graph”,
“namespace”: “dash_core_components”
}
Valid keys: [
“data”,
“layout”,
“frames”
]

I’m just using a pivot table to create the mean of data of some countries, here’s my code:
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Input, Output

HP= pd.read_excel(r’C:\Users\salinejs\HP.xlsx’)
Columns = [‘Station’, ‘Week’, ‘Owner’, ‘Cost’,‘Country’]
HP_filtered = Hyperzones[Columns]

avaliable_weeks= HP_filtered[‘Week’].unique()

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
html.Div([
html.Div([

    html.Div([
        dcc.Dropdown(
            id= 'Week_filter',
            options = [{'label':j, 'value':j}for j in avaliable_weeks],
            value= 'Week 42'
        ),

    ],
    style= {'float':'left', 'display':'inline-block'}
    ),



    html.Div([
        dcc.Graph(
            id='average_country',
        )
        ],
    )
    ]
),
],

)

@app.callback(
Output(‘average_country’, ‘figure’),
[Input(‘Week_filter’,‘value’)]
)

def update_value(week):

HP_filtered_week = HP_filtered[ HP_filtered['Week'] == week ]

pv = pd.pivot_table(HP_filtered_week, values='Cost', columns='Country', index='Week')

print(pv)
print(pv.columns)

return dcc.Graph(
    id='average_country',
    figure={
        'data': [{'x': pv.columns , 'y' : pv.values,'type': 'bar'
                  }],

        'layout':{
            'title': 'Cost',

        }


    })

if name == ‘main’:
app.run_server(debug=True)

2

I’m having a similar issue. “Failed component prop type: Invalid component prop figure key layout supplied to Graph.”
My code is a little bit more complex, however. Nevertheless, I’m stuck on this part:

                    'frames' : [go.Figure(
                            data= [{
                                'z': i,
                                'type':'contour'
                            }]
                        ) for i in tes
                    ],

Odd that ‘layout’ is giving the problem, when frames is the sticking point. I’m using Dash version 1.1.1 and plotly version 3 for Python3. Any help on this issue would be appreciated.

Update: The error was in the layout. I had 'layout ’ instead of ‘layout’. Facepalm. Fixed now.

To fix your issue sercotel, try changing;

to:


    figure={
        'data': [{'x': pv.columns , 'y' : pv.values,'type': 'bar'
                  }],

        'layout':{
            'title': 'Cost',

        }


    })
    return(figure)

Watch your indents, here, I didn’t fix them in this example. You already stated dcc.Graph the first time around in app.layout, so you don’t need to do it again in the callback.

3

Thanks I was able to fix it in the end, having quite a bit of trouble with indents in my code…