dashboardcn

Search documentation

Search for a page or component.

Radar Chart

PreviousNext

A filled, outlined, or dotted radar chart with polygon or circle grids, for scores and multi-series comparisons.

"use client"

import { RadarChart } from "@/components/ui/radar-chart"

Installation

pnpm dlx shadcn@latest add @dashboardcn/radar-chart

Also installs chart from shadcn/ui if missing.

Usage

import { RadarChart } from "@/components/ui/radar-chart"

<RadarChart
  data={data}
  angleKey="month"
  series={[
    { key: "desktop", label: "Desktop" },
    { key: "mobile", label: "Mobile" },
  ]}
  variant="line"
  showLegend
/>

Examples

Multiple series

Each series draws its own polygon. variant="line" drops the fill so overlaps stay readable.

"use client"

import { RadarChart } from "@/components/ui/radar-chart"

Score radar

variant="dots" marks every vertex. Set grid to "circle", a fixed domain, and showRadiusAxis for a scorecard.

"use client"

import { RadarChart } from "@/components/ui/radar-chart"