Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radar

A radar chart with a grid and circle fill (no lines) for React

A radar chart with circular grid rings, no spokes and a dot on each point.

Framework
UI library

The minimal circular radar: the grid is round rings without spokes, and the shape has a dot on each month. Use it when the overall profile matters more than reading each axis.

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 drawn as circles?

PolarGrid sets gridType to circle and radialLines to false. The rings are circles, and the spokes from the center are off.

How are the dots on the shape drawn?

Radar sets dot to { r: 4, fillOpacity: 1 }. The series uses dataKey desktop, fill var(--color-desktop), and fillOpacity 0.6. The dot is opaque. The polygon fill is 0.6.

Where do the month names come from?

PolarAngleAxis sets dataKey to month, so the rim prints January through June. There is no tick formatter in this file.

Where does the fill color come from?

config maps desktop to var(--chart-1) and the label Desktop. ChartContainer writes --color-desktop, which Radar uses for fill.

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 plotted?

desktop is 186, 305, 237, 203, 209, and 214 for January through June. April in this file is 203. ChartContainer is mx-auto aspect-square max-h-[250px].

All 70 chart examples