Treemap

Charts

Data Visualization

Visualize hierarchical data as nested rectangles proportional to values.

Preview

Treemap card with icons showing file type distribution

Storage Usage

127.8 GB used of 256 GB

Videos35.4%

Photos25.7%

Documents14.5%

Music9.6%

Code6.8%

Archives4.9%

Other3.2%

Custom Keys

Team time distribution with custom value formatting

Time Allocation

Hours by activity this month

Development36.6%

Meetings18.1%

Planning16.4%

Review12.1%

Research7.8%

Documentation5.2%

Admin3.9%

Standalone Treemap

Treemap component without card wrapper

Props

Component API reference

Treemap

Prop	Type	Default	Description
`data*`	`TreemapItem[]`	—	Array with value, label, color, and optional icon
`width`	`number`	`600`	Chart width in pixels
`height`	`number`	`400`	Chart height in pixels
`valueKey`	`string`	`'value'`	Data key for values
`labelKey`	`string`	`'label'`	Data key for labels
`gap`	`number`	`2`	Gap between rectangles
`borderRadius`	`number`	`4`	Corner radius
`formatValue`	`(v: number) => string`	—	Value formatter
`onItemClick`	`(item) => void`	—	Click handler

TreemapCard

Prop	Type	Default	Description
`title`	`string`	—	Card header title
`subtitle`	`string`	—	Card header subtitle
`showLegend`	`boolean`	`true`	Show legend below treemap
`maxLegendItems`	`number`	`8`	Max items in legend

Usage

Import and implementation examples

import { Treemap, TreemapCard } from '@/blocks/charts/treemap'
import { Video, Image, Music } from 'lucide-react'

// Basic Treemap
<Treemap
  data={[
    { label: 'Category A', value: 45, color: 'var(--color-indigo-500)' },
    { label: 'Category B', value: 30, color: 'var(--color-teal-500)' },
    { label: 'Category C', value: 25, color: 'var(--color-slate-400)' },
  ]}
  width={600}
  height={400}
/>

// With custom keys and formatting
<Treemap
  data={[
    { category: 'Engineering', amount: 850000 },
    { category: 'Marketing', amount: 420000 },
  ]}
  valueKey="amount"
  labelKey="category"
  formatValue={(v) => `$${(v / 1000).toFixed(0)}k`}
/>

// With icons
<Treemap
  data={[
    { label: 'Videos', value: 45, icon: <Video /> },
    { label: 'Photos', value: 32, icon: <Image /> },
    { label: 'Music', value: 12, icon: <Music /> },
  ]}
/>

// Treemap Card with legend
<TreemapCard
  title="Storage Usage"
  subtitle="127.8 GB used"
  data={storageData}
  height={280}
  formatValue={(v) => `${v} GB`}
  showLegend
/>

Features

Built-in functionality

Squarified layout: Optimal aspect ratio algorithm
Interactive tooltips: Hover for details
Icon support: Display icons in cells
Auto label sizing: Text scales to fit
Custom colors: Per-item color support
Legend with percentages: Visual breakdown
Click handling: Interactive selection
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses role="img" for treemap containeraria-label describes chart contentInteractive cells are focusable

Keyboard Navigation

Key	Action
`Tab`	Navigate between cells
`Enter`	Select cell (triggers onClick)

Notes

Legend provides text alternative
Tooltips show detailed values
Consider data table for complex data

Related Components

Pie Chart Bar Chart Heatmap