SunburstChart

beta

D3-powered sunburst chart for hierarchical allocation data — fund decomposition, portfolio sector breakdown, budget hierarchy

Finance/Storybook ↗

import { SunburstChart } from "@nodus/design-system/finance"

Demo coming soon

Props

Prop	Type	Default	Description
`data`req	`SunburstNode`	—	Hierarchical data tree with name/value/children
`width`	`number`	—	SVG width in px (default 400)
`height`	`number`	—	SVG height in px (default 400)
`showLabels`	`boolean`	—	Show arc labels (default true)
`title`	`string`	—	Accessible chart title

datarequired

Type SunburstNodeDefault —

Hierarchical data tree with name/value/children

width

Type numberDefault —

SVG width in px (default 400)

height

Type numberDefault —

SVG height in px (default 400)

showLabels

Type booleanDefault —

Show arc labels (default true)

title

Type stringDefault —

Accessible chart title

Metadatasemantic type border viz

MobileStacks / Scroll

Sunburst requires min 300px for legible arc labels. ViewBox-based sizing scales down gracefully.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

Squarified treemap for hierarchical proportion — portfolio allocation, currency exposure breakdown

AllocationDonut→

Portfolio allocation donut chart with segment labels and center total

Filled area chart for cumulative and stacked treasury data — liquidity buffers, stacked funding sources

Was this helpful?