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

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

• 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