Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radar

A radar chart with lines only for React

A radar chart drawing two series as outlines without a fill.

Framework
UI library

Use outlines when two filled shapes would cover each other. Both series are drawn with fillOpacity={0} and a stroke, on a grid without spokes.

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 do I draw the radar as an outline?

Each Radar sets fillOpacity={0}, stroke to its series color, and strokeWidth={2}. Desktop uses var(--color-desktop) and mobile uses var(--color-mobile). The fill is still set, and fillOpacity={0} makes it transparent so only the stroke shows.

How do I hide the spokes?

PolarGrid sets radialLines={false}. The concentric grid stays, and the lines from the center out to each month are omitted. PolarAngleAxis still prints month with dataKey="month".

How are the two outlines told apart?

Two Radar components share one RadarChart and the same chartData. dataKey is desktop on one and mobile on the other. config names them Desktop and Mobile and maps their colors to var(--chart-1) and var(--chart-2).

What does the tooltip list?

ChartTooltipContent sets indicator="line", a short bar in the series color beside each name. Hovering a month lists both Desktop and Mobile. cursor={false} on ChartTooltip turns the hover cursor off.

Are there dots on the vertices?

No. This file doesn't set dot, and Radar leaves dots off by default. The shape is only the 2px stroke. Pass dot with an r on Radar when you want a marker at each month.

How do I size the square chart?

ChartContainer sets mx-auto aspect-square max-h-[250px] inside a w-full max-w-xl frame. That overrides the container's default 16:9 box so the outlines stay round.

All 70 chart examples