Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radar

A radar chart with a custom grid for React

A radar chart whose grid is reduced to one outer ring without spokes.

Framework
UI library

A radar chart with a lighter grid: polarRadius places one ring at 90 pixels and radialLines={false} removes the spokes, so only the outer circle frames the shape. Use it when the full grid is more than the chart needs.

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 grid reduced to one ring?

PolarGrid sets polarRadius to [90], radialLines to false, and strokeWidth to 1. That array is a single radius, so the grid is one ring and the spokes are off.

Where do the month names come from?

PolarAngleAxis sets dataKey to month, so the axis prints the stored names, January through June.

How is the shape filled?

Radar uses dataKey desktop, fill var(--color-desktop), and fillOpacity 0.6. config maps desktop to var(--chart-1) and the label Desktop.

What does the tooltip show?

ChartTooltipContent sets hideLabel, and cursor is false. The row is named Desktop from config, with that month's desktop value.

Which values are on the shape?

desktop is 186, 305, 237, 273, 209, and 214 for January through June. April in this file is 273.

How big is the chart?

ChartContainer is mx-auto aspect-square max-h-[250px]. The outer frame is w-full max-w-xl with a border and padding.

All 70 chart examples