ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Charts

Treemap

rx.recharts.treemap

Official docs

Workshop order

Please show how much of the phone's storage photos, videos and apps take up, in a single picture where the areas can be compared.

rx.recharts.treemap treats the whole as one rectangle and fills it with smaller rectangles whose areas are proportional to each item's value. Use it when there are so many items that pie slices would get too small, or to show hierarchical data with subcategories inside categories.

Unlike other charts, it is drawn with a single treemap and no child parts. data_key is the value that becomes the area, name_key is the name written on each rectangle, and "fill" in the data becomes the rectangle's color.

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

Try the props

The same data has two size values (size and visits). Switching data_key changes what determines the area, so the rectangle layout is recalculated. Try changing the animation style too.

Try the props

data_key

animate

easing

rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    is_animation_active=True,
    animation_easing="ease",
    width="100%",
    height=300,
)

Each change of data_key redraws the chart with a new layout. Turn off is_animation_active and it changes instantly.

Prop	Values	Default	Use
`data`	list of dicts	none	The items. Sub-items via `"children"`, color via `"fill"`
`data_key`	string	`"value"`	Key of the value that becomes the area
`name_key`	string	`"name"`	Key of the name written on each rectangle
`aspect_ratio`	number	auto	The width:height ratio the rectangles aim for
`width`, `height`	number or percentage	`"100%"`	Size. Give the height as a number
`is_animation_active`	`True` / `False`	`True`	Turns animation on
`animation_begin`, `animation_duration`	milliseconds	`0` / `1500`	Start delay; duration
`animation_easing`	`"ease"` `"ease-in"` `"ease-out"` `"ease-in-out"` `"linear"`	`"ease"`	Speed curve
`on_animation_start`, `on_animation_end`	events		Animation start and end
`on_click` `on_mouse_enter` `on_mouse_leave` …	events		Mouse events

Aspect ratio (aspect_ratio)

aspect_ratio is the width:height ratio each rectangle tries to approach. With 1 the treemap divides into shapes as close to squares as possible; with 4, into wide rectangles. The closer to square, the easier it is to compare areas by eye and the better the names fit. In 0.10 it accepts only integers.

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.flex(
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=1,
        width="100%",
        height=220,
    ),
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=4,
        width="100%",
        height=220,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

Hierarchical data (children)

Give an item a "children" list and it is divided again inside. A parent's area is the sum of its children's values, and children of the same parent are grouped in one block. Below, items sit inside three grocery categories. Each category is painted in shades of one color so the blocks stand out.

rx.recharts.treemap(
    data=[
        {
            "name": "Fruit",
            "children": [
                {"name": "Apple", "size": 1200, "fill": rx.color("red", 8)},
                {"name": "Pear", "size": 600, "fill": rx.color("red", 6)},
                {"name": "Plum", "size": 400, "fill": rx.color("red", 5)},
            ],
        },
        {
            "name": "Veg",
            "children": [
                {"name": "Kale", "size": 900, "fill": rx.color("green", 8)},
                {"name": "Leek", "size": 500, "fill": rx.color("green", 6)},
            ],
        },
        {
            "name": "Grain",
            "children": [
                {"name": "Rice", "size": 1100, "fill": rx.color("amber", 8)},
                {"name": "Oat", "size": 300, "fill": rx.color("amber", 6)},
            ],
        },
    ],
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

Animation events

on_animation_start and on_animation_end fire when the drawing animation starts and ends. The text below reads "Drawing..." while the animation runs, then changes to "Done" when it finishes after 2.5 seconds, and the count in parentheses goes up by one.

Animation: Waiting (0)

class TreemapEventState(rx.State):
    status: str = "Waiting"
    rounds: int = 0

    @rx.event
    def started(self):
        self.status = "Drawing..."

    @rx.event
    def ended(self):
        self.status = "Done"
        self.rounds += 1


rx.vstack(
    rx.text("Animation: ", TreemapEventState.status, " (", TreemapEventState.rounds, ")", size="2"),
    rx.recharts.treemap(
        data=[
            {"name": "A", "size": 5, "fill": rx.color("accent", 8)},
            {"name": "B", "size": 3, "fill": rx.color("teal", 8)},
            {"name": "C", "size": 2, "fill": rx.color("orange", 8)},
        ],
        data_key="size",
        name_key="name",
        animation_duration=2500,
        on_animation_start=TreemapEventState.started,
        on_animation_end=TreemapEventState.ended,
        width="100%",
        height=240,
    ),
    width="100%",
)

Filling the order

The five storage items are drawn by area, with the smallest, "Other", toned down in gray. aspect_ratio=2 makes slightly wide rectangles that suit a wide screen, and the animation is kept short.

rx.recharts.treemap(
    data=[
        {"name": "Photos", "size": 48, "fill": rx.color("indigo", 9)},
        {"name": "Videos", "size": 31, "fill": rx.color("teal", 9)},
        {"name": "Apps", "size": 12, "fill": rx.color("orange", 9)},
        {"name": "Music", "size": 6, "fill": rx.color("plum", 9)},
        {"name": "Other", "size": 3, "fill": rx.color("gray", 8)},
    ],
    data_key="size",
    name_key="name",
    aspect_ratio=2,
    animation_duration=800,
    width="100%",
    height=280,
)

Workshop notes

Draw it with a single treemap(data=…, data_key=…, name_key=…). No child parts needed.
Rectangle colors come from "fill" in the data; subcategories from a "children" list.
aspect_ratio (an integer) sets the rectangle shape. The closer to 1, the easier the comparison.
Animation is is_animation_active, animation_duration and animation_easing; on_animation_end fires when it's done.
With only a few items, a pie or bar chart is easier to read.

← Previous

Charts · Funnel Chart

Charts · Sankey Chart

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.