Black Lives Matter. Please consider donating to Black Girls Code today.

How to embed a treemap in a Dash app without callbacks?

I want to show a treemap Without calling in callbacks. So I tried that:

import dash_html_components as html
import plotly.express as px
import plotly.express as px


from ..server import app

def layout():
    return html.Div([
        html.Div([
            html.Div([
                html.H5('Stocks', style={'textAlign': 'center', 'padding': 10}),
                px.treemap(
                    names = ["Eve","Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
                    parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"]
                )
            ], className='pretty_container twelve columns'),
        ], className='pretty_container twelve columns')
    ])

if __name__ == "__main__":
    app.run_server(debug=False, port=8051)

However it doesn’t show up and give me back the following 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:
{
  "data": [
    {
      "domain": {
        "x": [
          0,
          1
        ],
        "y": [
          0,
          1
        ]
      },
      "hoverlabel": {
        "namelength": 0
      },
      "hovertemplate": "label=%{label}<br>parent=%{parent}",
      "labels": [
        "Eve",
        "Cain",
        "Seth",
        "Enos",
        "Noam",
        "Abel",
        "Awan",
        "Enoch",
        "Azura"
      ],
      "name": "",
      "parents": [
        "",
        "Eve",
        "Eve",
        "Seth",
        "Seth",
        "Eve",
        "Eve",
        "Awan",
        "Eve"
      ],
      "type": "treemap"
    }
  ],
  "layout": {
    "template": {
      "data": {
        "barpolar": [
          {
            "marker": {
              "line": {
                "color": "#E5ECF6",
                "width": 0.5
              }
            },
            "type": "barpolar"
          }
        ],
        "bar": [
          {
            "error_x": {
              "color": "#2a3f5f"
            },
            "error_y": {
              "color": "#2a3f5f"
            },
            "marker": {
              "line": {
                "color": "#E5ECF6",
                "width": 0.5
              }
            },
            "type": "bar"
          }
        ],
        "carpet": [
          {
            "aaxis": {
              "endlinecolor": "#2a3f5f",
              "gridcolor": "white",
              "linecolor": "white",
              "minorgridcolor": "white",
              "startlinecolor": "#2a3f5f"
            },
            "baxis": {
              "endlinecolor": "#2a3f5f",
              "gridcolor": "white",
              "linecolor": "white",
              "minorgridcolor": "white",
              "startlinecolor": "#2a3f5f"
            },
            "type": "carpet"
          }
        ],
        "choropleth": [
          {
            "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
            },
            "type": "choropleth"
          }
        ],
        "contourcarpet": [
          {
            "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
            },
            "type": "contourcarpet"
          }
        ],
        "contour": [
          {
            "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
            },
            "colorscale": [
              [
                0,
                "#0d0887"
              ],
              [
                0.1111111111111111,
                "#46039f"
              ],
              [
                0.2222222222222222,
                "#7201a8"
              ],
              [
                0.3333333333333333,
                "#9c179e"
              ],
              [
                0.4444444444444444,
                "#bd3786"
              ],
              [
                0.5555555555555556,
                "#d8576b"
              ],
              [
                0.6666666666666666,
                "#ed7953"
              ],
              [
                0.7777777777777778,
                "#fb9f3a"
              ],
              [
                0.8888888888888888,
                "#fdca26"
              ],
              [
                1,
                "#f0f921"
              ]
            ],
            "type": "contour"
          }
        ],
        "heatmapgl": [
          {
            "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
            },
            "colorscale": [
              [
                0,
                "#0d0887"
              ],
              [
                0.1111111111111111,
                "#46039f"
              ],
              [
                0.2222222222222222,
                "#7201a8"
              ],
              [
                0.3333333333333333,
                "#9c179e"
              ],
              [
                0.4444444444444444,
                "#bd3786"
              ],
              [
                0.5555555555555556,
                "#d8576b"
              ],
              [
                0.6666666666666666,
                "#ed7953"
              ],
              [
                0.7777777777777778,
                "#fb9f3a"
              ],
              [
                0.8888888888888888,
                "#fdca26"
              ],
              [
                1,
                "#f0f921"
              ]
            ],
            "type": "heatmapgl"
          }
        ],
        "heatmap": [
          {
            "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
            },
            "colorscale": [
              [
                0,
                "#0d0887"
              ],
              [
                0.1111111111111111,
                "#46039f"
              ],
              [
                0.2222222222222222,
                "#7201a8"
              ],
              [
                0.3333333333333333,
                "#9c179e"
              ],
              [
                0.4444444444444444,
                "#bd3786"
              ],
              [
                0.5555555555555556,
                "#d8576b"
              ],
              [
                0.6666666666666666,
                "#ed7953"
              ],
              [
                0.7777777777777778,
                "#fb9f3a"
              ],
              [
                0.8888888888888888,
                "#fdca26"
              ],
              [
                1,
                "#f0f921"
              ]
            ],
            "type": "heatmap"
          }
        ],
        "histogram2dcontour": [
          {
            "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
            },
            "colorscale": [
              [
                0,
                "#0d0887"
              ],
              [
                0.1111111111111111,
                "#46039f"
              ],
              [
                0.2222222222222222,
                "#7201a8"
              ],
              [
                0.3333333333333333,
                "#9c179e"
              ],
              [
                0.4444444444444444,
                "#bd3786"
              ],
              [
                0.5555555555555556,
                "#d8576b"
              ],
              [
                0.6666666666666666,
                "#ed7953"
              ],
              [
                0.7777777777777778,
                "#fb9f3a"
              ],
              [
                0.8888888888888888,
                "#fdca26"
              ],
              [
                1,
                "#f0f921"
              ]
            ],
            "type": "histogram2dcontour"
          }
        ],
        "histogram2d": [
          {
            "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
            },
            "colorscale": [
              [
                0,
                "#0d0887"
              ],
              [
                0.1111111111111111,
                "#46039f"
              ],
              [
                0.2222222222222222,
                "#7201a8"
              ],
              [
                0.3333333333333333,
                "#9c179e"
              ],
              [
                0.4444444444444444,
                "#bd3786"
              ],
              [
                0.5555555555555556,
                "#d8576b"
              ],
              [
                0.6666666666666666,
                "#ed7953"
              ],
              [
                0.7777777777777778,
                "#fb9f3a"
              ],
              [
                0.8888888888888888,
                "#fdca26"
              ],
              [
                1,
                "#f0f921"
              ]
            ],
            "type": "histogram2d"
          }
        ],
        "histogram": [
          {
            "marker": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "histogram"
          }
        ],
        "mesh3d": [
          {
            "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
            },
            "type": "mesh3d"
          }
        ],
        "parcoords": [
          {
            "line": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "parcoords"
          }
        ],
        "pie": [
          {
            "automargin": true,
            "type": "pie"
          }
        ],
        "scatter3d": [
          {
            "line": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "marker": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "scatter3d"
          }
        ],
        "scattercarpet": [
          {
            "marker": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "scattercarpet"
          }
        ],
        "scattergeo": [
          {
            "marker": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "scattergeo"
          }
        ],
        "scattergl": [
          {
            "marker": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "scattergl"
          }
        ],
        "scattermapbox": [
          {
            "marker": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "scattermapbox"
          }
        ],
        "scatterpolargl": [
          {
            "marker": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "scatterpolargl"
          }
        ],
        "scatterpolar": [
          {
            "marker": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "scatterpolar"
          }
        ],
        "scatter": [
          {
            "marker": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "scatter"
          }
        ],
        "scatterternary": [
          {
            "marker": {
              "colorbar": {
                "outlinewidth": 0,
                "ticks": ""
              }
            },
            "type": "scatterternary"
          }
        ],
        "surface": [
          {
            "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
            },
            "colorscale": [
              [
                0,
                "#0d0887"
              ],
              [
                0.1111111111111111,
                "#46039f"
              ],
              [
                0.2222222222222222,
                "#7201a8"
              ],
              [
                0.3333333333333333,
                "#9c179e"
              ],
              [
                0.4444444444444444,
                "#bd3786"
              ],
              [
                0.5555555555555556,
                "#d8576b"
              ],
              [
                0.6666666666666666,
                "#ed7953"
              ],
              [
                0.7777777777777778,
                "#fb9f3a"
              ],
              [
                0.8888888888888888,
                "#fdca26"
              ],
              [
                1,
                "#f0f921"
              ]
            ],
            "type": "surface"
          }
        ],
        "table": [
          {
            "cells": {
              "fill": {
                "color": "#EBF0F8"
              },
              "line": {
                "color": "white"
              }
            },
            "header": {
              "fill": {
                "color": "#C8D4E3"
              },
              "line": {
                "color": "white"
              }
            },
            "type": "table"
          }
        ]
      },
      "layout": {
        "annotationdefaults": {
          "arrowcolor": "#2a3f5f",
          "arrowhead": 0,
          "arrowwidth": 1
        },
        "coloraxis": {
          "colorbar": {
            "outlinewidth": 0,
            "ticks": ""
          }
        },
        "colorscale": {
          "diverging": [
            [
              0,
              "#8e0152"
            ],
            [
              0.1,
              "#c51b7d"
            ],
            [
              0.2,
              "#de77ae"
            ],
            [
              0.3,
              "#f1b6da"
            ],
            [
              0.4,
              "#fde0ef"
            ],
            [
              0.5,
              "#f7f7f7"
            ],
            [
              0.6,
              "#e6f5d0"
            ],
            [
              0.7,
              "#b8e186"
            ],
            [
              0.8,
              "#7fbc41"
            ],
            [
              0.9,
              "#4d9221"
            ],
            [
              1,
              "#276419"
            ]
          ],
          "sequential": [
            [
              0,
              "#0d0887"
            ],
            [
              0.1111111111111111,
              "#46039f"
            ],
            [
              0.2222222222222222,
              "#7201a8"
            ],
            [
              0.3333333333333333,
              "#9c179e"
            ],
            [
              0.4444444444444444,
              "#bd3786"
            ],
            [
              0.5555555555555556,
              "#d8576b"
            ],
            [
              0.6666666666666666,
              "#ed7953"
            ],
            [
              0.7777777777777778,
              "#fb9f3a"
            ],
            [
              0.8888888888888888,
              "#fdca26"
            ],
            [
              1,
              "#f0f921"
            ]
          ],
          "sequentialminus": [
            [
              0,
              "#0d0887"
            ],
            [
              0.1111111111111111,
              "#46039f"
            ],
            [
              0.2222222222222222,
              "#7201a8"
            ],
            [
              0.3333333333333333,
              "#9c179e"
            ],
            [
              0.4444444444444444,
              "#bd3786"
            ],
            [
              0.5555555555555556,
              "#d8576b"
            ],
            [
              0.6666666666666666,
              "#ed7953"
            ],
            [
              0.7777777777777778,
              "#fb9f3a"
            ],
            [
              0.8888888888888888,
              "#fdca26"
            ],
            [
              1,
              "#f0f921"
            ]
          ]
        },
        "colorway": [
          "#636efa",
          "#EF553B",
          "#00cc96",
          "#ab63fa",
          "#FFA15A",
          "#19d3f3",
          "#FF6692",
          "#B6E880",
          "#FF97FF",
          "#FECB52"
        ],
        "font": {
          "color": "#2a3f5f"
        },
        "geo": {
          "bgcolor": "white",
          "lakecolor": "white",
          "landcolor": "#E5ECF6",
          "showlakes": true,
          "showland": true,
          "subunitcolor": "white"
        },
        "hoverlabel": {
          "align": "left"
        },
        "hovermode": "closest",
        "mapbox": {
          "style": "light"
        },
        "paper_bgcolor": "white",
        "plot_bgcolor": "#E5ECF6",
        "polar": {
          "angularaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
          },
          "bgcolor": "#E5ECF6",
          "radialaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
          }
        },
        "scene": {
          "xaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
          },
          "yaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
          },
          "zaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
          }
        },
        "shapedefaults": {
          "line": {
            "color": "#2a3f5f"
          }
        },
        "ternary": {
          "aaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
          },
          "baxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
          },
          "bgcolor": "#E5ECF6",
          "caxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
          }
        },
        "title": {
          "x": 0.05
        },
        "xaxis": {
          "automargin": true,
          "gridcolor": "white",
          "linecolor": "white",
          "ticks": "",
          "title": {
            "standoff": 15
          },
          "zerolinecolor": "white",
          "zerolinewidth": 2
        },
        "yaxis": {
          "automargin": true,
          "gridcolor": "white",
          "linecolor": "white",
          "ticks": "",
          "title": {
            "standoff": 15
          },
          "zerolinecolor": "white",
          "zerolinewidth": 2
        }
      }
    },
    "legend": {
      "tracegroupgap": 0
    },
    "margin": {
      "t": 60
    }
  }
}

Hi @MikeP, you need to pass your plotly figure (created by px.treemap) as the figure argument of a dcc.Graph. You don’t need callbacks for this. So the code would be

import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
import plotly.express as px


from ..server import app

def layout():
    return html.Div([
        html.Div([
            html.Div([
                html.H5('Stocks', style={'textAlign': 'center', 'padding': 10}),
                dcc.Graph(id='graph', 
                   figure=px.treemap(
                    names = ["Eve","Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
                    parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"]
                ))
            ], className='pretty_container twelve columns'),
        ], className='pretty_container twelve columns')
    ])

if __name__ == "__main__":
    app.run_server(debug=False, port=8051)
1 Like