Treemap
Shows many parts of a total as rectangles sized by value.
SourcePackage @weft-js/warp
Preview
tsx
import { Treemap } from '@weft-js/warp'export function Cost() { return ( <Treemap title="Cost by project" description="Grouped by team" data={PROJECT_TREE} format={dollars} short={thousands} /> )}type Status = 'Live' | 'Building' | 'Failed' | 'Paused'const PROJECTS: { id: string; name: string; owner: string; region: string; status: Status; deploys: number; uptime: number; latency: number; cost: number; updated: string }[] = [ { id: 'storefront', name: 'storefront', owner: 'Priya Raman', region: 'eu-west', status: 'Live', deploys: 412, uptime: 99.98, latency: 84, cost: 1240, updated: '2026-10-31' }, { id: 'checkout', name: 'checkout', owner: 'Tomás Oliveira', region: 'eu-west', status: 'Live', deploys: 288, uptime: 99.95, latency: 112, cost: 980, updated: '2026-10-31' }, { id: 'search-api', name: 'search-api', owner: 'Lena Fischer', region: 'us-east', status: 'Building', deploys: 196, uptime: 99.91, latency: 146, cost: 1610, updated: '2026-10-30' }, { id: 'billing', name: 'billing', owner: 'Mara Lindqvist', region: 'us-east', status: 'Live', deploys: 154, uptime: 99.99, latency: 73, cost: 720, updated: '2026-10-29' }, { id: 'mobile-bff', name: 'mobile-bff', owner: 'Sam Okafor', region: 'ap-south', status: 'Failed', deploys: 233, uptime: 99.42, latency: 208, cost: 860, updated: '2026-10-29' }, { id: 'notifier', name: 'notifier', owner: 'Jun Tanaka', region: 'eu-north', status: 'Live', deploys: 97, uptime: 99.97, latency: 58, cost: 310, updated: '2026-10-27' }, { id: 'reports', name: 'reports', owner: 'Noor Haddad', region: 'us-west', status: 'Paused', deploys: 41, uptime: 99.8, latency: 321, cost: 190, updated: '2026-10-22' }, { id: 'edge-cache', name: 'edge-cache', owner: 'Jun Tanaka', region: 'global', status: 'Live', deploys: 318, uptime: 100, latency: 21, cost: 1430, updated: '2026-10-31' }, { id: 'auth', name: 'auth', owner: 'Mara Lindqvist', region: 'eu-west', status: 'Live', deploys: 176, uptime: 99.99, latency: 66, cost: 540, updated: '2026-10-28' }, { id: 'ingest', name: 'ingest', owner: 'Lena Fischer', region: 'us-east', status: 'Live', deploys: 264, uptime: 99.93, latency: 131, cost: 2120, updated: '2026-10-30' },]const TEAM_OF: Record<string, string> = { storefront: 'Web', checkout: 'Web', 'search-api': 'Data', ingest: 'Data', reports: 'Data', billing: 'Platform', auth: 'Platform', notifier: 'Platform', 'edge-cache': 'Platform', 'mobile-bff': 'Mobile' }const PROJECT_TREE = PROJECTS.map(p => ({ name: p.name, value: p.cost, group: TEAM_OF[p.id] }))const dollars = (v: number) => `$${v.toLocaleString('en-US')}`const thousands = (v: number) => `$${(v / 1000).toFixed(1)}k`Installation
npm install @weft-js/warpUsage
tsx
import { Treemap } from '@weft-js/warp'<Treemap title="Cost by project" description="Grouped by team" data={PROJECT_TREE} format={dollars} short={thousands} />Accessibility
- Every chart has a text alternative and a table view of its numbers, so nothing depends on seeing the marks. See Chart for its keyboard support.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The heading. |
level | 2 | 3 | 4 | 6 | 5 | — | The title's heading level: one below the heading the chart sits under. Default 3, a chart in a page section. |
description | unknown | — | One supporting line under the title. |
toolbar | unknown | — | Beside the view toggle: a layout switch, a range picker. |
state | "error" | "loading" | "empty" | — | Replaces the plot, in the same frame. With no data the frame shows empty on its own. |
loading | string | — | Shows that work is under way. |
empty | { title: string; detail?: unknown; } | — | The title and detail shown in place of the plot when there is no data. |
error | { title: string; detail?: unknown; } | — | A message that marks the field invalid and says why. |
action | unknown | — | The next step under an empty or error state: a Retry button. |
data | TreeItem[] | — | The series to draw. |
summary | string | ((c: { data: TreeItem[]; title: string; }) => string) | — | One sentence for screen readers and the page; generated from the data when absent. |
groups | string[] | — | The order of the groups. |
format | Fmt | — | Turns a value into the text shown. |
short | Fmt | — | A compact format for the labels inside rectangles. |
RelatedSunburstDonut chart