Radial chart

A React component in Beamline's Charts & data-vis category.

Progress of a few measures toward their targets as concentric rings, full or half circle, with a centre readout and a list of each ring's value, target and percent.

Use it for

A handful of goals side by side (quarterly targets, quota attainment).
A compact progress visual in a card.

Not for

Precise comparisons (bar-list or bar-chart).
One value against a range with bands (gauge).

Anatomy

title
rings with tracks
centre readout
ring list (swatch, name, value of target, percent)
table button

Variants

0: shape: full · semi
1: target per row or one shared max

States

loading (skeleton)
empty (no data)
missing values (listed as Not measured, never drawn as 0)
active (hover or focus previews)
selected (click or Enter pins)
table view
over target (ring full, percent above 100)

Keyboard

Tab moves through the ring list; focus previews the ring and the centre reads it
Enter or Space pins it; Escape clears

Motion

Rings sweep to their value once (600 ms); the active ring brightens and others dim; the centre number rolls. Nothing moves under reduced motion.

Props

Prop	Type	Default	Description
`data / label / value`	`T[] / keyof T / keyof T`	—
`target`	`keyof T \| number`	—	A column with each row's target, or one shared maximum (default: the largest value).
`title / hideTitle / description`	`string / boolean / ReactNode`	—	The figure's name is always its accessible name.
`format`	`(v: number) => string`	—
`table`	`boolean`	—	Offer the table view (default on).
`loading`	`boolean`	—
`actions`	`ReactNode`	—
`className`	`string`	—
`shape`	`"full" \| "semi"`	—
`colors`	`string[]`	—
`size`	`number`	—
`list`	`boolean`	—
`active / defaultActive / onActiveChange`	`string \| null`	—	The selected item; hover and focus preview others.
`classNames`	`ChartClassNames`	—	Frame, tooltip and slice-list parts as applicable to this chart.
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—	The native chart figure; layout measurement refs stay internal.

Dependencies

motion

Import

import { RadialChart } from "@/components/radial-chart/radial-chart";

Get it

Radial chart is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent