Radar Chart

const data = /* ... */;

<RadarChart
  data={data}
  x="month"
  y={['desktop', 'mobile']}
  labels={{ desktop: 'Desktop', mobile: 'Mobile' }}
  points
  ariaLabel="Desktop and mobile visitors, January through June"
/>

A radar chart wraps a category axis into a circle and draws each series as a closed shape. Reach for it when the reader should judge a profile — the balance across five to eight categories — and compare two of them at a glance. It is a poor tool for reading exact values or for ranking: the eye compares areas, and area grows with the square of the value. When precision matters, use the bar chart.

RadarChart takes your rows and the names of the fields to read. Colors, typography, grid, tooltip, and legend all come from your design system.

Installation

npx shadcn@latest add @dotui/chart-radar

It brings the chart core — the host, the palette, and the shared frame — along with it.

Usage

import { RadarChart } from '@/ui/chart-radar'

Point x at the category field and y at the value field — one row per category. A chart is a figure, so ariaLabel is required.

const data = [
  { month: 'Jan', desktop: 186 },
  { month: 'Feb', desktop: 305 },
  { month: 'Mar', desktop: 237 },
]

export function Example() {
  return (
    <RadarChart
      data={data}
      x="month"
      y="desktop"
      labels={{ desktop: 'Desktop' }}
      legend={false}
      ariaLabel="Desktop visitors by month"
    />
  )
}

data is compared by identity, so define it outside your component — or memoize it. Every other prop is a flat scalar and can change freely.

Data shape

Two shapes work, and both draw the same chart.

Wide rows carry one column per series. Pass the columns as an array, and name them with labels:

<RadarChart
  data={data}
  x="month"
  y={['desktop', 'mobile']}
  labels={{ desktop: 'Desktop', mobile: 'Mobile' }}
  ariaLabel="Visitors by device"
/>

Long rows carry one row per series per category, with the series key in its own field. Pass that field as series, and set seriesOrder to fix color slots and legend order.

Series take colors from --chart-1 through --chart-8 in order. Every series is drawn on one shared radius scale running from zero to the largest value — a radar with two units on it is a chart with two meanings, so normalize first.

Grid and labels

The rings, the spokes, and the circumference labels are three separate switches: grid draws the rings, spokes the lines running out to each category, and axes the labels. gridShape makes the rings circles instead of polygons, gridTicks sets how many there are, and gridFill tints the area inside the outer one.

<RadarChart
  data={data}
  x="month"
  y="desktop"
  gridShape="circle"
  gridFill={0.2}
  spokes={false}
  ariaLabel="Desktop visitors by month"
/>

formatX rewrites the circumference labels, and axisDetail adds a second, muted line above each one — the value at that spoke, a share, a delta.

Annotations

polarMarks accepts raw TanStack Charts polar mark layers, spliced into the polar container on the same angle and radius scales. Cartesian marks would land outside the circle, so this is the escape hatch a radar uses. children renders as HTML above the chart, ignoring pointer events.

Accessibility

• ariaLabel is required and names the figure; add ariaDescription when the takeaway needs a sentence.
• The chart surface is in the tab order. Arrow keys move between spokes, Home and End jump to the first and last, Enter and Space pin the tooltip, and Escape dismisses it.
• Hovering or focusing a spoke reports every series at that category, named and valued — color alone never carries the distinction.
• Animation is off by default on polar charts. Turn it on per chart with animate.

Examples

API Reference

RadarChart

Interaction and animation props are shared by every chart family:

The host props — height, width, className, and the focus callbacks — are documented on the Chart page.