Treemap
Visualize hierarchical data as nested rectangles. Area represents magnitude. Great for showing proportions within a hierarchy.
Usage
import { TreemapChart } from "@chartts/react"
<TreemapChart
data={marketData}
value="marketCap"
label="company"
color="sector"
/>Props
| Prop | Type | Description |
|---|---|---|
| data | TreeNode[] | Hierarchical data structure |
| value | keyof T | Key for area sizing |
| label | keyof T | Key for cell labels |
| color | keyof T | string | Color key or fixed color |
| padding | number | Padding between cells. Default: 2 |
Features
- Nested hierarchies
- Squarified layout algorithm
- Cell labels with auto-sizing
- Color by category or value
- Interactive drill-down
- Animated transitions
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartFunnel ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram