Treemap

A treemap for sizes within a whole, as nested rectangles.

When to use

Use when: Sizes within a whole, as nested rectangles, such as storage by folder.
Avoid when: Precise comparison; areas are harder to compare than bars.

Installation

bunx shelf add chart-treemap

The source lands in src/components/ui/chart-treemap.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Chart from "@/components/ui/chart-treemap";

<Treemap aria-label="Storage by folder" data={data}>
  <Chart.Tooltip />
</Treemap>

Built on

Packages: @stylexjs/stylex, recharts
Shelf items: Chart, foundations
Figma: In progress. See Designers and Figma.