> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mzizi.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Radial chart

> Radial bar and gauge charts for progress, scores and completion.

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

```tsx theme={null}

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:

```tsx theme={null}
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:

```tsx theme={null}
<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

* **Weather dashboard** — UV index, humidity level, air quality as gauges
* **Goal tracking** — progress toward targets
* **Stats cards** — compact metric visualisation 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