TreeMap
Part-to-whole treemap chart for category composition.
stable
Quick Preview
Portfolio mix
Share of listings by area
- Lekki
- Ikoyi
- Yaba
- Ajah
Usage
<TreeMap data={data} title="Portfolio mix" />Examples
Default TreeMap
Use this as the starting point for TreeMap. Keep product data, routing, fetching, and authorization logic in the consuming app.
Portfolio mix
Share of listings by area
- Lekki
- Ikoyi
- Yaba
- Ajah
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
data | TreeMapDatum[] | - | Flat or nested category data. |
size | `"sm" | "md" | "lg"` |
legend | `"right" | "bottom"` | "right" |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.