Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radar

A radar chart with a legend for React

A radar chart comparing two series with a legend below it.

Framework
UI library

Use it to compare two series on one radar and say which is which. Desktop and mobile are drawn on the same grid, and ChartLegend lists them with their colors under the chart.

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 legend placed under the chart?

RadarChart renders ChartLegend with content set to ChartLegendContent and className mt-8. That margin pushes the legend down. verticalAlign is unset, so the legend stays at the bottom.

What do the legend items say?

ChartLegendContent looks up each series dataKey in config. desktop is labeled Desktop with color var(--chart-1), and mobile is labeled Mobile with color var(--chart-2).

How are the two shapes drawn?

One Radar uses dataKey desktop, fill var(--color-desktop), and fillOpacity 0.6. The other uses dataKey mobile and fill var(--color-mobile). Both sit on a PolarGrid, with PolarAngleAxis dataKey set to month.

Why is the chart margin negative?

RadarChart sets margin to { top: -40, bottom: -10 }. That pulls the plot toward the legend so the square frame can hold both. ChartContainer is mx-auto aspect-square max-h-[250px].

What does the tooltip show?

ChartTooltipContent sets indicator to line, and cursor is false. The title is the month, and the rows are Desktop and Mobile from config.

Which values are compared?

Desktop is 186, 305, 237, 73, 209, and 214 from January through June. Mobile is 80, 200, 120, 190, 130, and 140. April desktop is 73, the low point in this file.

All 70 chart examples