Treemap
Treemap charts in Reflex are built on Recharts, a React charting library, and created in pure Python. A treemap displays hierarchical, part-to-whole data as a set of nested rectangles, where the area of each rectangle is proportional to its value. Treemaps are a space-efficient way to compare many categories at once.
Simple Example
An rx.recharts.treemap() takes a list of dictionaries as its data and a data_key naming the field that determines each rectangle's size. Use name_key to set the label shown on each tile.
Aspect Ratio
The aspect_ratio prop controls the target width-to-height ratio the treemap uses when laying out each rectangle. Lower values produce taller tiles; higher values produce wider ones.
Related Charts
Explore more chart types you can build with Reflex and Recharts in pure Python:
API Reference
rx.recharts.Treemap
A Treemap chart component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
width | Union[str, int] | The width of chart container. String or Integer. |
height | Union[str, int] | The height of chart container. String or Integer. |
data | Sequence | data of treemap. Array. |
data_key | Union[str, int] | The key of a group of data which should be unique in a treemap. String | Number. |
name_key | str | The key of each sector's name. String. |
aspect_ratio | int | The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given. Number. |
is_animation_active | bool | If set false, animation of area will be disabled. |
animation_begin | int | Specifies when the animation should begin, the unit of this option is ms. |
animation_duration | int | Specifies the duration of animation, the unit of this option is ms. |
animation_easing | "ease""ease-in""ease-out""ease-in-out""linear" | The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'. |