Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radar

A radar chart with multiple data for React

A radar chart overlaying desktop and mobile series on one grid.

Framework
UI library

Use it to compare two profiles on one grid. Desktop and mobile overlap, desktop at 60% opacity so the mobile shape shows through, and the tooltip lists both values.

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 plot two series on one radar?

Render two Radar components in the same RadarChart. One sets dataKey="desktop", the other dataKey="mobile". They share chartData, and each month row carries both numbers.

How do the overlapping fills stay readable?

Desktop sets fill="var(--color-desktop)" and fillOpacity={0.6}. Mobile sets fill="var(--color-mobile)" and leaves fillOpacity unset, so that polygon paints solid. The colors come from config: var(--chart-1) and var(--chart-2).

How does the tooltip show both values?

ChartTooltipContent sets indicator="line". On a month it lists Desktop and Mobile, using the label from config, each with its value. cursor={false} on ChartTooltip turns the hover cursor off.

What labels the spokes?

PolarAngleAxis uses dataKey="month", January through June. PolarGrid draws the rings and spokes behind both shapes. There is no ChartLegend in this file, so those names show up in the tooltip.

Where do the series names come from?

config gives desktop the label Desktop and mobile the label Mobile. ChartContainer also turns each color into --color-desktop and --color-mobile, which the fill props read.

How is the chart sized?

ChartContainer is 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 two shapes stay circular.

All 70 chart examples