SunburstChart
D3-powered sunburst chart for hierarchical allocation data — fund decomposition, portfolio sector breakdown, budget hierarchy
import { SunburstChart } from "@danagraph/design-system/finance"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
datareq | 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 |
datarequiredType
SunburstNodeDefault —Hierarchical data tree with name/value/children
widthType
numberDefault —SVG width in px (default 400)
heightType
numberDefault —SVG height in px (default 400)
showLabelsType
booleanDefault —Show arc labels (default true)
titleType
stringDefault —Accessible chart title
MobileStacks / Scroll
Sunburst requires min 300px for legible arc labels. ViewBox-based sizing scales down gracefully.
Design Rationale
This component was designed to express:
Explore Related
Treemap→
Squarified treemap for hierarchical proportion — portfolio allocation, currency exposure breakdown
AllocationDonut→
Portfolio allocation donut chart with segment labels and center total
AreaChart→
Filled area chart for cumulative and stacked treasury data — liquidity buffers, stacked funding sources
Was this helpful?