Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Graphing

/

Treemap

Treemaps display hierarchical (tree-structured) data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension of the data.

rx.recharts.treemap(
    rx.recharts.graphing_tooltip(),
    data=data,
    data_key="size",
    stroke="#fff",
    fill="#8884d8",
)

A Treemap chart component in Recharts.

PropTypeDescriptionValues
widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

dataList

data of treemap. Array

data_keyUnion

The key of a group of data which should be unique in a treemap. String | Number | Function

aspect_ratioint

The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given. Number

is_animation_activebool

If set false, animation of area will be disabled.

animation_beginint

Specifies when the animation should begin, the unit of this option is ms.

animation_durationint

Specifies the duration of animation, the unit of this option is ms.

animation_easingLiteral

The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'

Event Triggers

TriggerDescription
on_animation_start

The customized event handler of animation start

on_animation_end

The customized event handler of animation end

← TooltipAspectratio →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting