Radial Chart

A radial/gauge chart component built using Recharts v3. Supports progress gauges, multi-value radial bars, and customizable angles.

Installation

$ npx shadcn@latest add @orecus/radial-chart

Registry:

@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card

Single value radial progress

Using colorStyle='default' and glow={false}

Prop	Type	Default	Description
`data`*	`{ name: string; value: number }[]`	—	The data for the chart - each item becomes a radial bar
`colors`	`ThemeColor[]`	—	Colors for each bar
`startAngle`	`number`	`90`	Start angle in degrees
`endAngle`	`number`	`-270`	End angle in degrees
`innerRadius`	`number \| string`	`"30%"`	Inner radius
`outerRadius`	`number \| string`	`"100%"`	Outer radius
`barSize`	`number`	`10`	Thickness of radial bars
`showBackground`	`boolean`	`true`	Show background track
`cornerRadius`	`number`	`5`	Corner radius for bars
`max`	`number`	`100`	Maximum value for the scale
`centerLabel`	`{ value: string \| number; label?: string }`	—	Center label for gauge-style display
`cardProps`	`CardProps`	—	Props to pass to the underlying Card component
`tooltipSortByValue`	`boolean`	`false`	Sort tooltip items by value (descending)
`legendIndicator`	`'square' \| 'circle' \| 'line'`	`'square'`	Shape of legend indicators
`legendShowValues`	`boolean`	`false`	Show values in legend
`legendWrap`	`boolean`	`true`	Allow legend items to wrap to multiple lines