Chartcn

Shadcn Radial Chart & Gauge

Show progress toward a goal as concentric rings or a half gauge, with the headline metric in the center.

CSV, TSV from Excel/Sheets, a Markdown table, or JSON.

CSV
Shape
Code
Image
chart.tsx
"use client"

import { Label, PolarAngleAxis, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const data = [
  { Goal: "Signups", Progress: 72 },
  { Goal: "Activation", Progress: 54 },
  { Goal: "Retention", Progress: 38 },
]

const chartConfig: ChartConfig = {
  "Signups": { label: "Signups", color: "var(--chart-1)" },
  "Activation": { label: "Activation", color: "var(--chart-2)" },
  "Retention": { label: "Retention", color: "var(--chart-3)" },
}

export function Chart() {
  const chartData = data.map((row) => ({ ...row, fill: chartConfig[String(row.Goal)]?.color }))
  const max = Math.max(100, ...data.map((row) => row.Progress ?? 0))
  const headline = data[0]

  return (
    <ChartContainer config={chartConfig} className="aspect-square h-[350px] w-full">
      <RadialBarChart data={chartData} startAngle={90} endAngle={-270} innerRadius="30%" outerRadius="95%">
        <PolarAngleAxis type="number" domain={[0, max]} tick={false} axisLine={false} />
        <ChartTooltip cursor={false} content={<ChartTooltipContent nameKey="Goal" hideLabel />} />
        <RadialBar dataKey="Progress" background cornerRadius={8} />
        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
          <Label
            content={({ viewBox }) => {
              if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox) || !headline) return null
              const { cx, cy } = viewBox
              return (
                <text x={cx} textAnchor="middle" dominantBaseline="middle">
                  <tspan x={cx} y={cy} className="fill-foreground text-2xl font-semibold">
                    {headline.Progress?.toLocaleString("en-US")}
                  </tspan>
                  <tspan x={cx} y={(cy ?? 0) + 20} className="fill-muted-foreground text-xs">
                    {String(headline.Goal)}
                  </tspan>
                </text>
              )
            }}
          />
        </PolarRadiusAxis>
        <ChartLegend content={<ChartLegendContent nameKey="Goal" />} verticalAlign="bottom" itemSorter={null} />
      </RadialBarChart>
    </ChartContainer>
  )
}

When to use a radial chart or gauge

Radial charts make a few progress percentages glanceable on a dashboard.

  • Goal completion: signups, activation, retention
  • Quota attainment per rep
  • Storage or plan usage

Data format

  • Use exactly 2 columns: Category,Value.
  • Values are drawn against 0–100 (or your largest value if it's bigger), so percentages read as progress.
  • Paste CSV, JSON from your API, TSV copied from Excel or Google Sheets, or a Markdown table. The generated component keeps your column names as its data keys.
CSV
Goal,Progress
Signups,72
Activation,54
Retention,38
Same data as JSON
[
  {"goal": "Signups", "progress": 72},
  {"goal": "Activation", "progress": 54},
  {"goal": "Retention", "progress": 38}
]

Options

Rings / Half gauge
Full concentric rings, or a 180° gauge.
Colors
Custom color per ring.

How to add it to your project

  1. 1. Add the shadcn/ui chart component (it installs Recharts):
    npx shadcn@latest add chart
  2. 2. Paste your data above, pick the options, and copy the generated chart.tsx.
  3. 3. Save it in your project (e.g. components/radial-chart.tsx) and render <Chart />, or <Chart data={rows} /> in Data as prop mode.

Radial / Gauge Chart FAQ