TreemapChart
v1.0.4Updated 25 Jul 2026Nested rectangles sized by value — recharts-backed. Use for budget / revenue breakdowns or any hierarchical part-of-whole.
Preview
Live · 8 storiesBudget BreakdownOpen ↗
▸Why this is recommendedcharttreemaphierarchybudget+4
TreemapChart — budget breakdown.
Recommended for+14
- ✓Budget breakdowns
- ✓Revenue by customer / category
- ✓Disk usage maps
Tags+6
charttreemaphierarchybudgetrechartsdata-viztooltip-formatterbreakdown
Features+4
- recharts Treemap engine
- Nested groups
- Hover tooltip
- Custom tooltip body via tooltipFormatter (per-leaf metrics from node.meta — e.g. "12 scenarios · 84% covered")
- Groups coloured from the validated categorical palette (--chart-1..7) — separable past 6 groups, no near-gray, no status-tone reuse
- Label inside rectangle
- i18n: numbers/axis values format per LocaleProvider locale
Not recommended for−2
- ✕Time-series (use LineChart)
- ✕Sequential matrices (use HeatmapChart)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
dataHierarchical nodes; each node may carry a free-form `meta` passthrough surfaced to tooltipFormatter
yestooltipFormatterCustomize the tooltip body for a cell — return per-leaf metrics from the node's meta. The path header above it is unchanged; omit for the built-in "Value: n" row
—