Chart Radial Bar

Radial bar charts render each value as a concentric arc. Built as a self-contained SVG component with gradient bars, a glow, background tracks, and inline labels.

Labeled

Concentric bars with inline labels, gradient fills, and a legend.

Usage

Import the parts you need from the component's folder.

import { ChartRadialBar } from "@/components/ui/chart";

API Reference

ChartRadialBar

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	One row per ring.
`config`	`ChartConfig`	—	Map of name → { label, color }.
`valueKey`	`string`	`"value"`	Row key for the bar value.
`nameKey`	`string`	`"name"`	Row key matched against config.
`innerRadius`	`number`	`35`	Inner radius of the band.
`outerRadius`	`number`	`110`	Outer radius of the band.
`barSize`	`number`	`22`	Thickness of each bar.
`max`	`number`	`100`	Value mapped to a full sweep.
`gradient`	`boolean`	`true`	Fill bars with a gradient.
`glow`	`boolean`	`true`	Apply a glow filter.
`background`	`boolean`	`true`	Render background tracks.
`showLabels`	`boolean`	`true`	Render inline labels.
`legend`	`boolean`	`true`	Render a legend below.

Chart Radar Bubble