Treemap Pro

Premium two-level treemap (groups → leaves) with zoom drill-down, fullscreen, hover panels, and 3-step bucketed color intensity. Self-contained.

Primitive: ChartTreemapPro· Standalone (no ChartRoot needed)

Interactive demo

Usage

import { ChartTreemapPro } from '@ramtt/charts'

<ChartTreemapPro
  data={nodes} // flat array, parentId=null = group
  hoverContent={(node, group) => <div>{node.name}: {node.value}</div>}
  enableZoom
  showLegend
/>

Props

Prop	Type	Default	Description
data*	`TreemapNode[]`	—	Flat node array with parentId (null = group)
hoverContent	`(node, group) => ReactNode`	—	Custom hover panel content
onBlockClick	`(node: TreemapNode) => void`	—	Called when a leaf block is clicked
enableZoom	`boolean`	true	Allow zoom drill-down on group click
enableFullscreen	`boolean`	true	Show fullscreen toggle
showLegend	`boolean`	true	Show color legend bar
gap	`number`	2	Gap between blocks in px
animate	`boolean`	true	Entry animation