CirclePacking
D3-powered circle packing chart for hierarchical allocation — portfolio → fund → position drill-down, budget decomposition, counterparty exposure tiers
import { CirclePacking } from "@nodus/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | PackNode | — | Hierarchical data tree with name/value/children |
width | number | — | SVG width in px (default 480) |
height | number | — | SVG height in px (default 480) |
showLabels | boolean | — | Show text labels inside circles (default true) |
title | string | — | Accessible chart title |
dataPackNodeDefault —Hierarchical data tree with name/value/children
widthnumberDefault —SVG width in px (default 480)
heightnumberDefault —SVG height in px (default 480)
showLabelsbooleanDefault —Show text labels inside circles (default true)
titlestringDefault —Accessible chart title
Circle packing requires min 300px for nested circle labels. Labels are hidden for circles smaller than 18px radius.
This component was designed to express:
Explore Related
D3-powered sunburst chart for hierarchical allocation data — fund decomposition, portfolio sector breakdown, budget hierarchy
Squarified treemap for hierarchical proportion — portfolio allocation, currency exposure breakdown
Portfolio allocation donut chart with segment labels and center total