> ## 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.

# Radar chart

> Radar charts for comparing several items across several dimensions at once.

Radar charts display multivariate data on a two-dimensional chart with three or more quantitative variables represented on axes starting from the same point. They are useful for comparing multiple items across several dimensions.

## Basic radar chart

```tsx theme={null}

const data = [
  { metric: "Performance", value: 85 },
  { metric: "Reliability", value: 92 },
  { metric: "Usability", value: 78 },
  { metric: "Security", value: 88 },
  { metric: "Scalability", value: 70 },
  { metric: "Cost", value: 65 },
]

const chartConfig = {
  value: { label: "Score", color: "var(--chart-1)" },
}

<ChartContainer config={chartConfig} className="h-[350px]">
  <RadarChart data={data} cx="50%" cy="50%" outerRadius="80%">
    <PolarGrid className="stroke-border" />
    <PolarAngleAxis dataKey="metric" className="text-xs fill-muted-foreground" />
    <PolarRadiusAxis angle={30} domain={[0, 100]} className="text-xs fill-muted-foreground" />
    <Radar
      dataKey="value"
      fill="var(--chart-1)"
      fillOpacity={0.2}
      stroke="var(--chart-1)"
      strokeWidth={2}
    />
    <ChartTooltip content={<ChartTooltipContent />} />
  </RadarChart>
</ChartContainer>
```

## Comparison radar

Overlay multiple datasets to compare:

```tsx theme={null}
const chartConfig = {
  current: { label: "Current", color: "var(--chart-1)" },
  target: { label: "Target", color: "var(--chart-3)" },
}

<RadarChart data={data} cx="50%" cy="50%" outerRadius="80%">
  <PolarGrid className="stroke-border" />
  <PolarAngleAxis dataKey="metric" className="text-xs fill-muted-foreground" />
  <Radar
    dataKey="current"
    fill="var(--chart-1)"
    fillOpacity={0.15}
    stroke="var(--chart-1)"
    strokeWidth={2}
  />
  <Radar
    dataKey="target"
    fill="var(--chart-3)"
    fillOpacity={0.15}
    stroke="var(--chart-3)"
    strokeWidth={2}
  />
  <ChartLegend content={<ChartLegendContent />} />
</RadarChart>
```

## Use cases

* **Technology sovereignty assessments** — compare tools across dimensions like cost, control, reliability
* **Weather comparison** — compare cities across temperature, humidity, wind, UV
* **Event scoring** — rate events across engagement, attendance, revenue, satisfaction

## Styling guidelines

* Use 5-8 axes — fewer than 5 makes a radar chart unnecessary (use a bar chart), more than 8 becomes cluttered
* Set `fillOpacity={0.2}` for single datasets, `fillOpacity={0.15}` when overlapping
* Use `strokeWidth={2}` for the outline
* Include `PolarGrid` with `className="stroke-border"` for reference lines
* Maximum 3 overlapping datasets — more than that is unreadable
* Include a legend when showing multiple datasets