Chart Radar

Radar charts plot one series across several axes on a polar grid. Built as a self-contained SVG component with gradient fill, glow, and dot markers.

Gradient fill

A radar with a vertical gradient fill and a glowing stroke.

Import the parts you need from the component's folder.

import { ChartRadar } from "@/components/ui/chart";

A diagonal gradient, thicker glowing stroke, and ring-style dots.

Prop	Type	Default	Description
`data`	`Record<string, any>[]`	—	One row per axis.
`config`	`ChartConfig`	—	Map of dataKey → { label, color }.
`dataKey`	`string`	`"value"`	Row key for the plotted value.
`categoryKey`	`string`	`"category"`	Row key for the axis label.
`maxDomain`	`number`	`100`	Value mapped to the outer ring.
`gridLevels`	`number`	`5`	Concentric grid rings.
`gradient`	`boolean`	`true`	Fill the area with a gradient.
`gradientDirection`	`"vertical" \| "diagonal"`	`"vertical"`	Gradient direction.
`glow`	`boolean`	`true`	Apply a glow filter to the stroke.
`dots`	`boolean`	`true`	Render dot markers at each vertex.
`dotVariant`	`"solid" \| "ring"`	`"solid"`	Filled dots or background-filled rings.
`strokeWidth`	`number`	`2`	Series outline width.