Radial Progress Chart

Concentric progress rings — one arc per series, each against its own track.

80%of budget

Figma$96.07
Netflix$23.01
ChatGPT$20.00

"use client"

import { RadialProgressChart } from "@/components/ui/charts"

const subscriptions = [
  { name: "Figma", value: 96.07, max: 120, color: "var(--chart-4)" },
  { name: "Netflix", value: 23.01, max: 120, color: "var(--chart-2)" },
  { name: "ChatGPT", value: 20.0, max: 120, color: "var(--chart-1)" },
]

export function RadialProgressChartDemo() {
  return (
    <RadialProgressChart
      className="max-w-lg"
      data={subscriptions}
      thickness={14}
      gap={10}
      showLegend
      valueFormatter={(v) => `$${v.toFixed(2)}`}
    >
      <span className="text-3xl font-semibold tracking-tight">80%</span>
      <span className="text-muted-foreground text-xs">of budget</span>
    </RadialProgressChart>
  )
}

About

A donut divides one whole into parts. A Radial Progress Chart compares several independent ratios that do not sum to anything — spend against each budget, uptime per service, quota used per plan. Reaching for a donut there is the usual reason a dashboard's "progress" card reads wrong.

Each series gets its own ring and its own denominator, and the centre is a slot: put a headline number, a badge, or nothing in it.

Installation


pnpm dlx shadcn@latest add https://ui.simplifyingai.com/r/radial-progress-chart.json

Usage

import { RadialProgressChart } from "@/components/ui/charts"

<RadialProgressChart
  data={[
    { name: "Figma", value: 96.07, max: 120 },
    { name: "Netflix", value: 23.01, max: 120 },
  ]}
  showLegend
>
  <span className="text-3xl font-semibold">+17%</span>
</RadialProgressChart>

API Reference

Prop	Type	Default	Description
`data`	`RadialProgressSeries[]`	—	`{ name, value, max?, color? }`, outermost ring first.
`max`	`number`	`100`	Denominator for rings without their own.
`size`	`number`	`240`	viewBox edge. The chart still scales to its container.
`thickness`	`number`	`12`	Ring stroke width in px.
`gap`	`number`	`8`	Space between rings in px.
`startAngle` / `endAngle`	`number`	`0` / `360`	Degrees; 0 is twelve o'clock, growing clockwise.
`rounded`	`boolean`	`true`	Round arc caps.
`track`	`"dashed" \| "solid" \| "none"`	`"dashed"`	Style of the unfilled ring behind each arc.
`showLegend`	`boolean`	`false`	Render name/value rows beside the rings.
`legendPosition`	`"right" \| "bottom"`	`"right"`	Where those rows sit.
`children`	`ReactNode`	—	Centre overlay.

Gauge Chart Bullet Chart

On This Page

About Installation Usage API Reference

Ask Your Database Anything with ChatPlotDB

Connect your database, ask questions in plain English, and get answers as charts, tables, and dashboards. No SQL required.