Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radar

A radar chart with no grid for React

A radar chart without a grid, showing only the shape, its dots and the labels.

Framework
UI library

A radar chart without a grid, leaving only the shape, its dots and the month labels. Use it when the profile is the point and the scale isn't.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do I remove the radar grid?

Leave PolarGrid out. This file renders PolarAngleAxis and one Radar only, so the month names and the shape are the whole chart.

How are the points marked without a grid?

Radar sets dot to { r: 4, fillOpacity: 1 }, so each month is a solid dot. dataKey="desktop" and fill="var(--color-desktop)" color the polygon, with fillOpacity={0.6}.

Why doesn't the tooltip repeat the month?

ChartTooltipContent sets hideLabel, which hides the tooltip title. PolarAngleAxis already shows month. The row is still Desktop from config, plus the value. cursor={false} turns the hover cursor off.

Where does the fill color come from?

The desktop entry in config sets label to Desktop and color to var(--chart-1). ChartContainer writes that as --color-desktop, and Radar reads it with fill="var(--color-desktop)".

How do I add another month?

Add a row to chartData with month and desktop. PolarAngleAxis uses dataKey="month", so the new name lands on its own spoke and the polygon gains a corner.

How do I keep the chart square?

ChartContainer uses mx-auto aspect-square max-h-[250px] inside a w-full max-w-xl frame. That replaces the container's default 16:9 box.

All 70 chart examples