Radial Chart

Display progress, completion rates, or single metrics with radial bars.

Progress Ring

Show completion progress with a circular gauge.

Daily Goal

Traffic production target completion

Multiple Metrics

Compare multiple values with concentric rings.

Traffic Sources

Production efficiency by source

desktop85%

wind65%

mobile45%

Gauge Style

Create a semi-circular gauge for dashboard displays.

System Efficiency

Current operating efficiency

Dashboard Cards

Use small radial charts as KPI indicators.

Desktop

Wind

Tablet

Mobile

Usage

import { RadialBar, RadialBarChart, PolarAngleAxis, Label } from "recharts"
import { ChartContainer } from "@/components/ui/chart"

const data = [{ name: "progress", value: 72, fill: "oklch(var(--chart-1))" }]

<ChartContainer config={chartConfig} className="min-h-[250px]">
  <RadialBarChart
    data={data}
    startAngle={90}
    endAngle={-270}    {/* Full circle: -270, Half: 0 */}
    innerRadius={80}
    outerRadius={110}
  >
    <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
    <RadialBar
      background        {/* Shows track behind bar */}
      dataKey="value"
      cornerRadius={10}
    />
    <Label content={...} />  {/* Center label */}
  </RadialBarChart>
</ChartContainer>