Sunburst Chart

Hierarchy as rings: inner ring = groups (categorical hues), outer rings = children (tints). Arc tooltips on hover, or focus + arrow keys.

Import

import { SunburstChart } from '@marbleui/ui'

Props

<SunburstChart>

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

Usage notes

A hierarchy drawn as rings around its total: groups on the inner ring, their children outside. It takes the same TreeDatum as Treemap, which shows the data as tiles.

<SunburstChart
  title="Traffic sources"
  summary="Organic search brings the most visits (5.1K, mostly Google); total 7.6K."
  data={{ name: 'Traffic', children: [
    { name: 'Organic', children: [{ name: 'Google', value: 4200 }, { name: 'Bing', value: 900 }] },
    { name: 'Paid', children: [{ name: 'Search ads', value: 1800 }] },
    { name: 'Direct', value: 700 },
  ] }}
/>

size (default 280) fixes the width and height in pixels; the chart doesn’t follow its container.
Groups are coloured --chart-1…8 by size rank and deeper rings get lighter tints; the legend names the groups. Each level thins the rings, so keep to two or three.
The centre shows the total. Arcs have no labels; their tooltips open on hover, or on keyboard (Tab into the chart, arrow keys walk the arcs, a live region reads each path). The “Show data” table lists every node by path (e.g. “Organic / Google”).

Example source · show

import { SunburstChart } from './sunburst-chart'

const traffic = { name: 'Traffic', children: [
  { name: 'Organic', children: [{ name: 'Google', value: 4200 }, { name: 'Bing', value: 600 }, { name: 'Other', value: 300 }] },
  { name: 'Paid', children: [{ name: 'Search ads', value: 1800 }, { name: 'Social ads', value: 900 }] },
  { name: 'Referral', children: [{ name: 'Partners', value: 1100 }, { name: 'Blogs', value: 500 }] },
  { name: 'Direct', value: 1500 },
] }
export const styles = { Default: () => <SunburstChart title="Traffic sources" summary="Organic search brings the most visits (5.1K, mostly Google); total 10.9K." data={traffic} /> }

Source: packages/ui/src/sunburst-chart/sunburst-chart.tsx

Catalog