Radial Chart

A radial chart for progress toward a goal, or a few values on concentric rings.

When to use

Use when: Progress toward a goal, or a few values on concentric rings.
Avoid when: A single value in a range; Meter or Progress is simpler.

Installation

bunx shelf add chart-radial

The source lands in src/components/ui/chart-radial.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

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

<RadialChart aria-label="Storage used" data={[{ name: "Used", value: 72 }]} startAngle={90} endAngle={-270}>
  <RadialBar dataKey="value" max={100} />
</RadialChart>

Built on

Packages: @stylexjs/stylex, recharts
Shelf items: Chart, foundations
Figma: In progress. See Designers and Figma.