Radial Bar ChartFreev1.0.0
Progress rings against targets, one ring per measure. Each ring closes at its own target and laps again, brighter, when it passes it; or put every ring on one scale with a tick at each target. The centre and the list beside it say the focused ring in words.
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-radial-bar-chart.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-radial-bar-chart.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add recharts@^3 - 2. Copy the files to these paths (Source below, or save them all as a .zip)
- components/ui/lumen/charts/radial-bar-chart.tsx
- components/ui/lumen/charts/chart-frame.tsx
- components/ui/lumen/charts/cartesian.tsx
- 3. Paste styles.css into your global CSS, after @import "tailwindcss";
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), Chart, Stat, the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { RadialBarChart } from "@/components/ui/lumen/charts/radial-bar-chart";
const goals = [
{ goal: "revenue", actual: 1180000, target: 1000000 },
{ goal: "pipeline", actual: 2640000, target: 3200000 },
{ goal: "renewals", actual: 410000, target: 520000 },
];
const config = {
revenue: { label: "New revenue", color: "var(--chart-1)" },
pipeline: { label: "Pipeline", color: "var(--chart-2)" },
renewals: { label: "Renewals", color: "var(--chart-3)" },
};
export function QuarterGoals() {
return (
<RadialBarChart
data={goals}
name="goal"
value="actual"
target="target"
config={config}
valueFormat={{ style: "currency", notation: "compact" }}
label="Quarter goals against target"
/>
);
}Props
data / name / value / target–Row[] / field / field / fieldOne row per ring: its name, the measured value and (optionally) its target.
config–ChartConfigColour and label per ring name. Unlisted rings take the series colours in order.
scale"target""target" | "shared"target: each ring closes at its own target and overshoot laps again. shared: one scale (0 to max) with a tick at each target.
max–numberThe full ring on the shared scale. Default: the largest value or target.
valueFormat–StatFormat | (n) => stringNumbers in the list, centre, table and summary.
legend"list""list" | "none"Each ring's value, target and share beside the rings (below on narrow cards).
Show all 12 propsShow fewer
active / onActiveChange–string | null / (name) => voidThe focused ring, controlled; omit for uncontrolled.
onSelect–(name) => voidA ring or list entry was clicked, or Enter pressed on a focused ring.
labels–{ summary?, ofTarget?, noData? }Words for i18n: summary(met, total) under the centre figure.
thickness / heightauto / 280number / numberRing thickness (in the 200px drawing) and plot height.
motion"full""full" | "subtle" | "off"Rings draw round in turn; reduced motion always wins.
loading / error / emptyText / label–boolean / string / string / stringStates in words with the height held, and the chart's accessible name.
Source
components/ui/lumen/charts/radial-bar-chart.tsx
