Sunburst

Shows a two-level split of a total as rings.

SourcePackage @weft-js/warp

Preview

tsx

import { Sunburst } from '@weft-js/warp'export function Spend() {  return (    <Sunburst title="October's bill" description="By service, then by what it paid for" data={SPEND_TREE} format={dollars} total="October" />  )}const SPEND_TREE = [  { name: 'Compute', children: [{ name: 'Builds', value: 2120 }, { name: 'Functions', value: 1840 }, { name: 'Edge', value: 1040 }] },  { name: 'Storage', children: [{ name: 'Artifacts', value: 980 }, { name: 'Logs', value: 540 }] },  { name: 'Database', children: [{ name: 'Primary', value: 860 }, { name: 'Replicas', value: 480 }] },  { name: 'Network', children: [{ name: 'CDN', value: 720 }, { name: 'Egress', value: 350 }] },]const dollars = (v: number) => `$${v.toLocaleString('en-US')}`

Installation

npm install @weft-js/warp

Usage

tsx

import { Sunburst } from '@weft-js/warp'<Sunburst title="October's bill" description="By service, then by what it paid for" data={SPEND_TREE} format={dollars} total="October" />

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`	`{ name: string; children: { name: string; value: number; }[]; }[]`	—	The series to draw.
`summary`	`string \| ((c: { data: { name: string; children: { name: string; value: n…`	—	One sentence for screen readers and the page; generated from the data when absent.
`format`	`Fmt`	—	Turns a value into the text shown.
`total`	`string`	—	The word under the total in the middle.

RelatedTreemap Donut chart