Getting an Error Using Dash for Figure as Invalid argument `figure.layout` passed into Graph, Expected `object`. Was supplied type `array`

Question

I am trying a code to plot some data using dash and I am thinking, I am doing it right. But not sure why getting a very peculiar message ( plotly 3.8.1 and dash 0.42)

The error message I am getting is :

Invalid argument figure.layout passed into Graph with ID “graph-with-slider”. Expected object. Was supplied type array.

I have created an output which is working fine and giving data and the problem is in the layout and figure call. whicj I am not understanding.

 external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
#
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
server = app.server

app.config['suppress_callback_exceptions'] = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

#
app.layout = html.Div([
        html.Div([
            html.H1('Testing Phase', style = {'text-align': 'center'}),


                html.H5('Enter ID'),
                dcc.Dropdown(
                    id = 'id',
                    style = {'width': '250px'},
                    options = [
                        {'label': 'AA', 'value': 'AA'},
                        {'label': 'AC', 'value': 'AC'},
                        {'label': 'UQ', 'value': 'UQ'},
                        {'label': 'NT', 'value': 'NT'},
                        {'label': 'PQ', 'value': 'PQ'}],
                    value = 'AA'
                ),

                html.H5('Enter Zone Yield Item'),
                dcc.Dropdown(
                    id = 'mz',
                    style = {'width': '200px'},
                    options = [
                        {'label': 'E1', 'value': 'E1'},
                        {'label': 'E2', 'value': 'E2'},
                        {'label': 'E3', 'value': 'E3'},
                        {'label': 'E4', 'value': 'E4'},
                        {'label': 'E5', 'value': 'E5'},
                        {'label': 'E6', 'value': 'E6'}],
                    value = 'E1'
                ),
    

                html.Br(),
                html.Br(),

                html.Button(
                    id = 'submit',
                    n_clicks = 0,
                    children = 'Submit'

                ),

                html.Br(),
                html.Br(),

                   html.Div([

                    dcc.Graph(
                        id='mygraph'
                    ),

                ]),

                html.Br(),
                html.Br(),

            ])
        ])

    ])

@app.callback(Output('mygraph', 'figure'),
                       [Input('submit', 'n_clicks')],
                       [State('pid', 'value'), State('mz', 'value')])])
def update_figure(n_clicks, pid, zone):

        mydf = SomeFuncFunc(id, zone)

        fit_data = mydf[0]

        l_col = fit_data.columns[2]

        z_col = fit_data.columns[3]  

        z2_col = fit_data.columns[4]

        l1_v = str(l_col)
        z1_v = str(z_col)


        print("Starting Trace")

        fits = []

        fits.append(go.Scatter(
            x = fit_data[l_col],
            y = fit_data[z_col],
            mode = 'markers',
            opacity = 0.9,
            marker = {
                'size': 20, 'symbol': "hexagon", "color": "orange",
                'line': {'width': 0.5, 'color': 'white'}
            },
            name = z1_v + "_" + "Plot",
        )),

        fits.append(go.Scatter(
             x = fit_data[l_col],
             y = fit_data[z2_col],
            mode = 'markers',
            opacity = 0.9,
            marker = {
                'size': 20, 'symbol': "diamond-open-dot", "color": "blue",
                'line': {'width': 0.9, 'color': 'red'}
            },
            name = z1_v + "_" + "Fit",
        )),

        mylayout = go.Layout(
             width = 800,
             height = 500,
            xaxis = {'title': 'X axis'},
            yaxis = {'title': 'Y axis'}
            margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            legend = {'x': 0, 'y': 1},
            hovermode = 'closest'
        ),
        fig = {'data':  fits, 'layout':mylayout}

        return fig



 if __name__ == '__main__':

      app.run_server(debug = True, port=8053)  #

It should plot the data. If I do not include layout, it is plotting, but not always.

The Error Details:

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)Error: Invalid argument `figure.layout` passed into Graph with ID "graphid".
Expected `object`.
Was supplied type `array`.
   at propTypeErrorHandler (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=0.23.0&m=1557158783:40947:5)

   at CheckedComponent (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=0.23.0&m=1557158783:37306:9)

   at Td (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/[email protected]?v=0.23.0&m=1557158783:82:9)

   at be (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/[email protected]?v=0.23.0&m=1557158783:91:477)

   at hi (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/[email protected]?v=0.23.0&m=1557158783:104:140)

   at Qg (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/[email protected]?v=0.23.0&m=1557158783:144:287)

   at Rg (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/[email protected]?v=0.23.0&m=1557158783:145:166)

   at Sc (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/[email protected]?v=0.23.0&m=1557158783:158:109)

   at Z (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/[email protected]?v=0.23.0&m=1557158783:156:492)

   at Kc (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/[email protected]?v=0.23.0&m=1557158783:155:69)

Answer 1

Figured the problem is due to the comma at the end of layout, which triggered the graph layout to be taken as an array instead of object. It is working fine now.