Radar Chart

Display multivariate data on a radial grid. Great for comparing multiple metrics.

Basic Radar Chart

System Performance

Current performance across key metrics

Comparison Radar

Compare current performance against targets or benchmarks.

Current vs Target

Performance metrics comparison

Multi-Site Comparison

Compare multiple entities across the same metrics.

Site Performance

Monthly efficiency comparison between sites

Line Only

Use lines without fill for cleaner comparison of multiple series.

Performance Outline

Stroke-only radar for clarity

Usage

import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

const data = [
  { metric: "Efficiency", value: 85 },
  { metric: "Uptime", value: 98 },
  { metric: "Output", value: 72 },
]

<ChartContainer config={chartConfig} className="min-h-[350px]">
  <RadarChart data={data}>
    <PolarGrid />
    <PolarAngleAxis dataKey="metric" />
    <PolarRadiusAxis angle={30} domain={[0, 100]} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Radar
      name="current"
      dataKey="value"
      stroke="var(--color-current)"
      fill="var(--color-current)"
      fillOpacity={0.3}
    />
  </RadarChart>
</ChartContainer>