Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radar

A radar chart with a grid filled for React

A radar chart with its polygon grid tinted in the series color.

Framework
UI library

A radar chart whose polygon grid is tinted with the series color, adding depth behind the shape. The grid's className sets the fill and opacity.

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

PolarGrid keeps polygon rings and sets className to fill-(--color-desktop) opacity-20. The rings are filled with the desktop color at 20% opacity.

How is the data shape filled?

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

Where do the month names come from?

PolarAngleAxis sets dataKey to month, so the rim prints the stored names, January through June. Radar in this file has no dot.

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, 285, 237, 203, 209, and 264 for January through June. February is 285 and June is 264 in this file.

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