Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

A radar chart with a radius axis for React

Desktop and mobile on a radar with a value scale along one spoke. Month names stay off the rim, and the tooltip uses the month as its title.

Desktop and mobile filled on a polygon grid. A value scale runs along one spoke. There are no month names around the rim. The tooltip uses the month as its title.

Use the scale when readers need a number for distance from the center. Put the months back on the rim if the names matter more than the scale. For both columns, use a Table. In React, Base UI does not draw that scale. You add the radius axis, and you pass both series.

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

Anatomy

Chart anatomy: container, grid, axis, bar, tooltip, legend

Usage

<div className="w-full max-w-xl rounded-md border bg-background p-4">
  <ChartContainer
    className="mx-auto aspect-square max-h-[250px]"
    config={chartConfig}
  >
    <RadarChart data={chartData}>
      <ChartTooltip
        content={<ChartTooltipContent indicator="line" labelKey="month" />}
        cursor={false}
      />
      <PolarGrid />
      <Radar
        dataKey="desktop"
        fill="var(--color-desktop)"
        fillOpacity={0.6}
      />
      <Radar dataKey="mobile" fill="var(--color-mobile)" />
      <PolarRadiusAxis
        angle={60}
        axisLine={false}
        orientation="middle"
        stroke="var(--foreground)"
      />
    </RadarChart>
  </ChartContainer>
</div>

FAQ

How is the value scale drawn?

PolarRadiusAxis sets angle to 60, orientation to middle, axisLine to false, and stroke to var(--foreground). The ticks sit along that spoke, and the axis line itself is off.

Where are the month names?

The months live on each row as month. This chart has no PolarAngleAxis, so those names stay off the rim. The tooltip points at the field with labelKey month.

Which shapes 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 labelKey to month, and cursor is false. The series rows are named Desktop and Mobile from config. The month values here are words like January, and those words are not keys in config.

What grid is behind the shapes?

PolarGrid is rendered with no extra props, so it keeps its polygon rings and spokes. The radius axis is the value scale laid over that grid.

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. ChartContainer is mx-auto aspect-square max-h-[250px].

API Reference

Chart

Sets config={chartConfig}, indicator="line" and labelKey="month". The rest is on the Chart page.

All 70 chart examples