Skip to Content
ComponentsRadial

Radial Chart

A circular bar chart that radiates from a center point, ideal for showing progress or part-to-whole relationships.

"use client"
 
import { RadialBar, RadialBarChart } from "recharts"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
<ChartContainer config={chartConfig} className="h-72 w-full">
  <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
    <ChartTooltip content={<ChartTooltipContent />} />
    <RadialBar dataKey="desktop" fill="var(--color-desktop)" background cornerRadius={4} />
  </RadialBarChart>
</ChartContainer>

Examples

With center label

<RadialBarChart innerRadius={60} outerRadius={110} startAngle={90} endAngle={-270}>
  <PolarRadiusAxis tick={false} axisLine={false}>
    <Label content={({ viewBox }) => { ... }} />
  </PolarRadiusAxis>
  <RadialBar dataKey="desktop" background cornerRadius={4} />
</RadialBarChart>
Last updated on
Radar