Part-to-whole as nested rectangles
Each rectangle sizes to its value, so the biggest contributors are impossible to miss. Suited to storage, budgets, and other breakdowns.
Default
Disk usage
Storage breakdown by category (MB)
Total23.7 GB
Free12.3 GB
Readable labels
Labels sit on the cells, so each one measures its own fill and takes whichever text colour reads better against it. On a mid-tone, where neither reaches AA, the label gains a thin halo in the opposite colour. Pass light custom colours and every name stays legible in both themes.
Paint stock
Light and dark custom fills side by side
// From the npm package
import { Treemap } from 'rift-ds/charts';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/treemap.json