Radial Chart

Charts

A single-metric progress gauge.

Radial charts display one metric against a target as an arc that fills around a circle. They are a compact, glanceable way to show progress, scores, or capacity.

npx shadcn@latest add radial-chart

Default

A score of 72 out of 100.

Preview

Live

72Health score

tsx

1<RadialChart value={72} label="Health score" height={220} />

Custom

A different color, target, and label.

Preview

Live

1860Monthly goal

tsx

1<RadialChart
2  value={1860}
3  max={2400}
4  label="Monthly goal"
5  color="var(--color-chart-3)"
6  height={220}
7/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
value	number	The current value of the metric.
max	number= 100	The target value the arc fills toward.
color	string= "var(--color-primary)"	The fill color of the arc.
label	string	Optional text rendered under the centered value.
height	number= 220	The chart height in pixels.