Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radar

A radar chart for React

A radar chart plotting one series across six months as a filled shape.

Framework
UI library

The starting point for comparing values across several axes at once. One series is plotted across six months as a filled shape on a polygon grid, and the tooltip shows the hovered month's value.

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 is the series drawn?

One Radar sets dataKey="desktop", fill="var(--color-desktop)", and fillOpacity={0.6}. ChartContainer defines --color-desktop from config, where label is Desktop and color is var(--chart-1).

How do months become the corners?

PolarAngleAxis reads dataKey="month". chartData has one row per month, January through June, and that row's desktop value is a vertex. Add a row to add a corner.

What does PolarGrid draw?

PolarGrid draws the concentric rings and the spokes. fillOpacity={0.6} on Radar leaves those rings visible through the fill. This demo doesn't pass grid props, so the grid stays a polygon.

What does the tooltip show?

ChartTooltip renders ChartTooltipContent and sets cursor={false}. The title is the hovered month, and the row is Desktop with that month's value. Keep the tooltip inside ChartContainer so it can read config.

How do I size the radar?

The frame is w-full max-w-xl. ChartContainer sets mx-auto aspect-square max-h-[250px] so the plot stays square. The container's own default, without those classes, is a 16:9 box.

Can keyboard users reach a point?

Yes. RadarChart keeps Recharts' accessibilityLayer default, which is on, so the plotted points can take focus. The month on PolarAngleAxis and the Desktop label in config are the names the tooltip repeats.

All 70 chart examples