Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radar Chart

One series plotted around six spokes on a polygon grid, the months joined into a filled shape. Compare one profile across categories in React.

Framework
Charting library

Preview

Preview width

About

Reach for a radar when one thing is measured on several comparable dimensions and the overall shape is the point: a skill profile, a product's scores, six months of traffic. For a trend over time, a line chart is clearer; for exact comparisons, use bars.

Each month sits on its own spoke, and its value sets how far from the center that corner lands. Four polygon rings behind the shape mark the scale, and the shape is filled at 60% so the rings show through.

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

Usage

import { ChartRadarSimple } from "@/components/charts/chart-radar-simple";
<ChartRadarSimple />

Customize

  • <RadarChart data={chartData}> holds the rows. <PolarAngleAxis dataKey="month"> puts a month on each spoke and <Radar dataKey="desktop"> draws the shape.
  • <PolarGrid /> draws polygon rings and spokes by default; gridType and radialLines change that.
  • fill="var(--color-desktop)" and fillOpacity={0.6} color the shape from chartConfig.
  • ChartTooltipContent with its default dot shows the month and the value; cursor={false} turns off the hover highlight.
  • ChartContainer is mx-auto aspect-square max-h-[250px], so <RadarChart> gets a square to fill.

FAQ

How many categories can a radar hold?

Five to eight spokes read well. With fewer than five, a bar chart says the same thing more clearly. Past eight, the labels crowd each other and the shape stops meaning much. Each row of chartData adds a spoke.

How do I put a different category at the top?

Recharts starts at 90 degrees, the top, and runs clockwise to -270. Set startAngle and endAngle on <RadarChart> to turn it, or reorder chartData.

Why doesn't the shape reach the outer ring?

Recharts picks the radius domain from the data and rounds it up. To fix it, add <PolarRadiusAxis domain={[0, 400]} tick={false} axisLine={false} />.

How do I change the fill?

fillOpacity={0.6} on <Radar> lets the grid show through. Set it to 0 with a stroke and strokeWidth for an outline; fill reads var(--color-desktop).

Can I use it with the keyboard?

Yes. accessibilityLayer is on by default in Recharts 3: Tab into the chart, then the Left and Right arrow keys move the tooltip between months.

How do I plot my own data?

Replace chartData, set dataKey on <PolarAngleAxis> to your category and on <Radar> to your value, and rename the desktop entry in chartConfig to the same key.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts