RadialBarChart
D3-powered radial bar chart for comparative metrics in circular layout — KPI comparison, limit utilization gauges, multi-metric overview
import { RadialBarChart } from "@danagraph/design-system/finance"Loading demo…
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 |
dataType
RadialBarItem[]Default —Array of {name, value, max?} items — max defaults to highest value
widthType
numberDefault —SVG width in px (default 420)
heightType
numberDefault —SVG height in px (default 420)
innerRadiusType
numberDefault —Inner donut hole radius in px (default 50)
titleType
stringDefault —Accessible chart title
Design Rationale
This component was designed to express:
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
BumpChart→
D3-powered bump chart for rank changes over time — fund performance rankings, counterparty ranking shifts, quarterly peer comparison
Was this helpful?