TreeMap

Visualize hierarchical data as proportional rectangles. Each area represents its value relative to the whole, making patterns in large datasets instantly visible.

Hierarchical Data

Squarified Layout

Animated Entry

Responsive

TypeScript

Tooltips

Click Handlers

Keyboard Accessible

Revenue Breakdown

Tech company revenue segmented by business unit and product line

Selected: Click a rectangle to select

Animations

Installation

Get started with the TreeMapChart component in just a few steps.

Quick Install

bash

npx mario-charts@latest add treemap-chart

Zero Lock-in Philosophy

The component is fully yours to own, modify, and customize.

Examples

Explore different data shapes and use cases for the TreeMapChart component.

Flat Data - Disk Usage

Simple non-hierarchical data showing proportional disk usage

Portfolio Allocation

Multi-level hierarchy showing investment portfolio breakdown by asset class

Loading State

Error State

Chart Error

Failed to load category data

Empty State

No Data

There's no data to display

API Reference

Complete TypeScript interface with all available props and configurations.

Prop	Type	Default	Description
`data`required	readonly TreeMapNode[]	—	Array of tree nodes with name, optional value, and optional children
`colors`	readonly string[]	DEFAULT_COLORS	Array of colors for top-level categories. Children inherit parent color at reduced opacity.
`height`	number	400	Height of the chart in pixels
`loading`	boolean	false	Show loading skeleton state
`error`	string \| null	null	Error message to display
`animation`	boolean	true	Enable entrance animations (scale + opacity stagger)
`onClick`	(node: TreeMapNode, path: readonly string[]) => void	—	Callback fired when a rectangle is clicked. Path contains the ancestry from root to clicked node.
`className`	string	—	Additional CSS classes to apply to the container