Treemap / Sunburst

Part-to-whole across a hierarchy: area = value, top-level groups get the categorical hues, leaves are tints of their group. Tile tooltips on hover, or focus + arrow keys.

Import

import { Treemap } from '@marbleui/ui'

Props

<Treemap>

Prop	Type	Default
data *required	`TreeDatum`	`—`
summary *required	`string`	`—`
className	`string`	`—`
height	`number`	`300`
title	`string`	`—`
valueFormat	`(n: number) => string`	`formatCompact`

Usage notes

Part-to-whole across a two-level hierarchy, with tile area proportional to value. For the same data as rings use SunburstChart.

<Treemap
  title="Cloud spend by service"
  summary="Compute is $3.9K of $5.3K, led by the API at $2.4K."
  valueFormat={(n) => `$${(n / 1000).toFixed(1)}K`}
  data={{ name: 'Cloud spend', children: [
    { name: 'Compute', children: [{ name: 'API', value: 2400 }, { name: 'Workers', value: 1500 }] },
    { name: 'Storage', children: [{ name: 'Postgres', value: 1100 }, { name: 'Backups', value: 300 }] },
  ] }}
/>

data is a TreeDatum ({ name, value?, children? }): values sit on leaves and groups are summed. Give every top-level group children so it gets a label strip.
Groups are coloured --chart-1…8 by size rank, so a group can change colour when the data changes; leaves are tints of their group.
Only tiles larger than about 54×30px print a name. The rest rely on the tooltip and the “Show data” table. Tab focuses the plot and arrow keys walk the tiles group by group, with the tooltip and a live region following.
Width follows the container; height defaults to 300.

Example source · show

import { Treemap } from './treemap'

const spend = { name: 'Cloud spend', children: [
  { name: 'Compute', children: [{ name: 'API', value: 2400 }, { name: 'Workers', value: 1500 }, { name: 'Agents', value: 900 }] },
  { name: 'Storage', children: [{ name: 'Postgres', value: 1100 }, { name: 'Blob', value: 700 }, { name: 'Backups', value: 300 }] },
  { name: 'Network', children: [{ name: 'Egress', value: 800 }, { name: 'CDN', value: 450 }] },
  { name: 'Other', children: [{ name: 'Logs', value: 380 }, { name: 'Support', value: 250 }] },
] }
export const styles = { Default: () => <Treemap className="w-[36rem] max-w-full" title="Cloud spend by service" summary="Compute is the largest group at $4.8K, led by the API at $2.4K; total $8.8K." data={spend} valueFormat={(n) => `$${(n / 1000).toFixed(1)}K`} /> }

Source: packages/ui/src/treemap/treemap.tsx

Catalog