'Error 'An object was provided as `children` instead of a component....' appears on dashboard

sample csv data:

date,Data Center,Customer,companyID,source,target,value 6/1/2021,dcA,customer1,companyID1,step1:open_list_view,exit,1 6/1/2021,dcB,customer2,companyID2,step1:open_list_view,exit,1 6/1/2021,dcC,customer3,companyID3,step1:open_list_view,exit,1 6/2/2021,dcD,customer4,companyID4,step1:open_list_view,exit,2 6/2/2021,dcE,customer5,companyID5,step1:open_list_view,step2:switch_display_option,1

I run below code for put the sankey chart in dashboard, and the chart can be updated accordingly by applying filters. but an error appears on dashboard. What is the issue?

An object was provided as children instead of a component, string, or number (or list of those). Check the children property that looks something like:

    import io
from base64 import b64encode
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import plotly.io as pio
import pandas as pd

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

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

dataset = pd.read_csv('perfGoal_cleanSankey.csv')

labelListTemp1 = list(set(dataset.source.values))
labelListTemp2 = list(set(dataset.target.values))
labelList = labelListTemp1 + labelListTemp2
sankey_node = list(dict.fromkeys(labelList))
 
fig = go.Figure(data=[go.Sankey( node = dict( pad=15,thickness=20,line = dict(color = "black", width = 0.5),label = labelList,color = 'black' ),
                                 link = dict(source = dataset.source.apply(lambda x: labelList.index(x)),
                                             target = dataset.target.apply(lambda x: labelList.index(x)),
                                             value = dataset.value))])

#fig.update_layout(autosize=False,width = 3000,height = 1000,hovermode = 'x',title="performance Goal user behavior monitor",font=dict(size=16, color='blue'))
    
#fig.write_html('/Users/i073341/Desktop/plotly/perfUXRGoal.html', auto_open=True)
#fig.show()



app.layout = html.Div([
    dcc.Dropdown(
        id='dataCenter_dropdown',
        options=[ {'label': i, 'value': i} for i in dataset['Data Center'].unique()] + [{'label': 'Select all', 'value': 'allID'}],
        multi=True, placeholder='Please select Data Center'),
    dcc.Dropdown(
        id='customer_dropdown',
        options=[{'label': i, 'value': i} for i in dataset['Customer'].unique()]  + [{'label': 'Select all', 'value': 'allID'}],
        multi=True, placeholder='Please select Customer'),
    
    dcc.Dropdown(
        id='companyID_dropdown',
        options=[{'label': i, 'value': i} for i in dataset['companyID'].unique()] + [{'label': 'Select all', 'value': 'allID'}],
        multi=True, placeholder='Please select companyID'),
    
    
#    html.Div(id='dd-output-container'),
     dcc.Graph(id='uxrPerfGoalSankey',figure=fig)
])

@app.callback(
#    Output('dd-output-container', 'children'),
    Output('uxrPerfGoalSankey', 'figure'),
    [Input('dataCenter_dropdown', 'value'),
     Input('customer_dropdown', 'value'),
     Input('companyID_dropdown', 'value')])


def update_graph(dataCenter, customer, companyID):

    if dataCenter=='Select all' and customer=='Select all' and companyID=='Select all':
        df=dataset.copy()
    else:
        df = dataset.loc[dataset['Data Center'].isin([dataCenter]) & dataset['Customer'].isin([customer]) & dataset['companyID'].isin([companyID])]
    
    labelListTemp1 = list(set(df.source.values))
    labelListTemp2 = list(set(df.target.values))
    labelList = labelListTemp1 + labelListTemp2
    sankey_node = list(dict.fromkeys(labelList))
    
    fig = go.Figure(data=[go.Sankey( node = dict( pad=15,thickness=20,line = dict(color = "black", width = 0.5),label = labelList,color = "blue" ),
                                     link = dict(source = df.source.apply(lambda x: labelList.index(x)),
                                                 target = df.target.apply(lambda x: labelList.index(x)),
                                                 value = df.value))])
    return fig
    
    

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


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source