Skip to Content
ComponentsRadar

Radar Chart

A spider/web chart that displays multivariate data as a polygon on a radial grid.

"use client"
 
import { Radar, RadarChart, PolarGrid, PolarAngleAxis } from "recharts"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
<ChartContainer config={chartConfig} className="h-72 w-full">
  <RadarChart data={chartData}>
    <PolarGrid />
    <PolarAngleAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Radar
      dataKey="desktop"
      fill="var(--color-desktop)"
      fillOpacity={0.3}
      stroke="var(--color-desktop)"
    />
  </RadarChart>
</ChartContainer>

Examples

Single series with dots

<Radar
  dataKey="desktop"
  fill="var(--color-desktop)"
  fillOpacity={0.4}
  dot={{ r: 4, fillOpacity: 1 }}
/>
Last updated on
PieRadial