Radar Chart

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


import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from "recharts"
 
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:


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 in Mukoko

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