CleenUI · Charts · TreemapChart

TreemapChart

Hierarchical area chart where rectangle size encodes value — portfolio composition, category breakdowns.

storybook.cleenui.com · charts-treemapchart--default
Open in new window

About TreemapChart

TreemapChart shows hierarchical data where each rectangle's area represents its value. Nested rectangles show sub-categories within categories. Useful for visualizing portfolio composition, file-system size distribution, market-share breakdowns.

Clicking a rectangle drills into its children. Color can encode a secondary dimension (e.g. growth rate while size encodes value).

When to use it

  • Portfolio composition visualization.
  • Storage or disk-usage breakdowns.
  • Market share and competitive analysis.
  • Category-wise budget or revenue breakdowns.

Common props

Prop
Type
Description
data
Node
Root node with nested children.
valueKey
string
Field used for rectangle sizing.
colorKey
string
Field used for color coding.
onClick
(node) => void
Drill-down handler.
showLabels
boolean
Render text labels in rectangles.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.