How to change the children of a tab?

Dash Python
1

I tried to update the children under a tab, but somehow failed with error message:

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:
{
“fill”: “toself”,
“r”: [
1,
2,
3,
4,
5
],
“theta”: [
“a”,
“b”,
“c”,
“d”,
“e”
],
“type”: “scatterpolar”
}

Can anyone help? Thanks in advance!
// Code of the tab content
html.Div(
children=[],
id=“tabs-content-example”,
className=“canvas”,
style={“text-align”: “left”, “margin”: “auto”}),
// Callback code
@app.callback(
Output(“tabs-content-example”, “children”), [Input(“stitching-tabs”, “value”)]
)
def fill_tab(tab):
if tab == “canvas-tab”:
a = go.Scatterpolar(r=[1,2,3,4,5], theta=[‘a’,‘b’,‘c’,‘d’,‘e’], fill=‘toself’)
return [html.Div(a)]
else:
return [html.Div(“sdfnsdjkfbskjdbfkj”)] # This works

2

Hi! I believe the problem is that you can not directly provide a go.Scatterpolar object as the children property of a Div as you do here:

Instead, you need to wrap it into a dcc.Graph object first. A minimum working example would be:

import dash
import plotly.graph_objs as go
import dash_core_components as dcc
import dash_html_components as html

a = go.Scatterpolar(
    r=[1, 2, 3, 4, 5],
    theta=['a', 'b', 'c', 'd', 'e'],
    fill='toself'
)

b = html.Div(
    children=[
        dcc.Graph(
            id='polarplot',
            figure={
                'layout': {'height': 800},
                'data': [a]
            }
        )
    ]
)

app = dash.Dash(__name__)
app.layout = b

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

Thank you! It works now:laughing::laughing: