Radial Chart

Radial charts (also called gauge charts or radial bar charts) display data in a circular layout. They are effective for showing progress toward a goal, scores, or completion percentages.

Basic radial bar


import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { RadialBarChart, RadialBar, PolarAngleAxis } from "recharts"
 
const data = [
  { name: "Progress", value: 72, fill: "var(--chart-1)" },
]
 
const chartConfig = {
  progress: { label: "Progress", color: "var(--chart-1)" },
}
 
<ChartContainer config={chartConfig} className="h-[250px]">
  <RadialBarChart
    data={data}
    startAngle={90}
    endAngle={-270}
    innerRadius="70%"
    outerRadius="100%"
    cx="50%"
    cy="50%"
  >
    <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
    <RadialBar
      dataKey="value"
      cornerRadius={8}
      background={{ fill: "var(--muted)" }}
    />
    <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle" className="fill-foreground text-3xl font-bold">
      72%
    </text>
  </RadialBarChart>
</ChartContainer>

Multiple metrics

Show several metrics as concentric rings:


const data = [
  { name: "Revenue", value: 85, fill: "var(--chart-1)" },
  { name: "Users", value: 62, fill: "var(--chart-2)" },
  { name: "Events", value: 91, fill: "var(--chart-3)" },
]
 
<RadialBarChart
  data={data}
  startAngle={90}
  endAngle={-270}
  innerRadius="30%"
  outerRadius="100%"
  barSize={12}
>
  <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
  <RadialBar
    dataKey="value"
    cornerRadius={6}
    background={{ fill: "var(--muted)" }}
  />
  <ChartLegend content={<ChartLegendContent />} />
</RadialBarChart>

Gauge chart

A half-circle gauge for displaying a single metric:


<RadialBarChart
  data={[{ value: 68, fill: "var(--chart-2)" }]}
  startAngle={180}
  endAngle={0}
  innerRadius="60%"
  outerRadius="100%"
  cx="50%"
  cy="70%"
>
  <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
  <RadialBar
    dataKey="value"
    cornerRadius={8}
    background={{ fill: "var(--muted)" }}
  />
  <text x="50%" y="65%" textAnchor="middle" className="fill-foreground text-2xl font-bold">
    68
  </text>
  <text x="50%" y="75%" textAnchor="middle" className="fill-muted-foreground text-xs">
    Air quality index
  </text>
</RadialBarChart>

Use cases in Mukoko

Weather dashboard — UV index, humidity level, air quality as gauges
Goal tracking — progress toward targets
Stats cards — compact metric visualization within cards
Health scores — connectivity score, data sovereignty assessment

Styling guidelines

Use cornerRadius={8} for rounded bar ends
Set background={{ fill: "var(--muted)" }} for the unfilled track
Display the value as centered text inside the chart
For full circles, use startAngle={90} and endAngle={-270}
For half circles, use startAngle={180} and endAngle={0}
Use barSize={12} for multiple concentric rings to keep them thin
Maximum 4-5 concentric rings before it becomes hard to read