Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radar

A radar chart with a custom label for React

A radar chart whose axis labels show both values and the month at each point.

Framework
UI library

Use it when the axis labels should carry the numbers. The tick of PolarAngleAxis is a function that prints each month's desktop and mobile values above its name, so both series can be read without a hover.

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 the axis labels show both values and the month?

PolarAngleAxis sets dataKey to month and tick to renderTick. That function reads chartData[index] and returns a text node with the desktop count, a slash, the mobile count, and the month on a second line.

How is that label text styled?

The text uses className fill-foreground, fontSize 13, and fontWeight 500. The slash and the month tspan use fill-muted-foreground. The month tspan also sets dy to 1rem, fontSize to 12, and x to the tick's x.

Why is the first label shifted up?

When index is 0, renderTick sets y to Number(y) - 10. The other months use the y they were given. RadarChart sets margin to 10 on every side.

Which series are filled?

One Radar uses dataKey desktop, fill var(--color-desktop), and fillOpacity 0.6. The other uses dataKey mobile and fill var(--color-mobile). config colors them with var(--chart-1) and var(--chart-2).

What does the tooltip show?

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

What does a label look like for January?

January's row is desktop 186 and mobile 80, so the tick reads 186/80 with January underneath. The same pattern follows for February through June. PolarGrid is the default grid behind both shapes.

All 70 chart examples