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 for React

A radar chart with a circular grid and a dot on each point.

Framework
UI library

A radar chart with a round grid instead of the default polygon, which makes distances from the center easier to compare. Each point has a dot.

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 does the grid become circles?

PolarGrid sets gridType to circle, so the rings are circles. The spokes stay, because radialLines is still at its default.

How are the dots on each point drawn?

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

Where do the month names come from?

PolarAngleAxis sets dataKey to month, so the rim prints the full month from each row. There is no tick formatter in this file.

Where does the series color come from?

config maps desktop to var(--chart-1) and the label Desktop. ChartContainer writes --color-desktop for the Radar 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, 273, 209, and 214 for January through June. April in this file is 273. ChartContainer is mx-auto aspect-square max-h-[250px].

All 70 chart examples