RadialBarChart

beta

D3-powered radial bar chart for comparative metrics in circular layout — KPI comparison, limit utilization gauges, multi-metric overview

Finance/Storybook ↗

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

Demo coming soon

Props

Prop	Type	Default	Description
`data`	`RadialBarItem[]`	—	Array of {name, value, max?} items — max defaults to highest value
`width`	`number`	—	SVG width in px (default 420)
`height`	`number`	—	SVG height in px (default 420)
`innerRadius`	`number`	—	Inner donut hole radius in px (default 50)
`title`	`string`	—	Accessible chart title

data

Type RadialBarItem[]Default —

Array of {name, value, max?} items — max defaults to highest value

width

Type numberDefault —

SVG width in px (default 420)

height

Type numberDefault —

SVG height in px (default 420)

innerRadius

Type numberDefault —

Inner donut hole radius in px (default 50)

title

Type stringDefault —

Accessible chart title

Metadatasemantic type border viz

Design Rationale

This component was designed to express:

View all principles →

Explore Related

AllocationDonut→

Portfolio allocation donut chart with segment labels and center total

CovenantGauge→

Debt covenant compliance card with threshold vs. current visualization and headroom

D3-powered bump chart for rank changes over time — fund performance rankings, counterparty ranking shifts, quarterly peer comparison

Was this helpful?