Radar Skill Chart

Multi-axis radar chart: a drawing animation on reveal, values on vertex hover, and two series overlaid for comparison.

A multi-axis radar chart drawn in pure SVG: on reveal the data polygon expands out from the center while the outline grows along its edges, hovering a vertex floats a tooltip with that axis's value, and a second data series can be overlaid semi-transparently for comparison — which suits skill assessments, product comparisons, and similar storytelling.

Loading preview…

npx shadcn@latest add https://webberui.com/r/radar-skill-chart.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Sizesize

300

Max valuemax

100

Grid ring countrings

Primary series colorcolor

Second series colorcolor2

Primary series nameseriesLabel

<RadarSkillChart />

Installation

npx shadcn@latest add https://webberui.com/r/radar-skill-chart.json

Or, once registries are configured in components.json, install it as @webberui/radar-skill-chart.

Usage

import { RadarSkillChart } from "@/components/ui/radar-skill-chart";

<RadarSkillChart
  axes={[
    { label: "React", value: 92 },
    { label: "TypeScript", value: 85 },
    { label: "Testing", value: 62 },
    { label: "Collaboration", value: 88 },
  ]}
  series2={[60, 48, 30, 72]}
  seriesLabel="This year"
  series2Label="Last year"
/>

Props

Prop	Type	Default	Description
`axes`	`RadarAxisDatum[]`	—	Per-axis data `{ label, value }`, at least 3 axes, with the primary series values embedded in it
`series2`	`number[]`	—	The second set of values (overlaid semi-transparently for comparison); the order must line up with `axes`
`seriesLabel`	`string`	`"系列 A"`	Name of the primary series, used in the legend and the tooltip when there are two series (the built-in default is Traditional Chinese for "Series A", so pass this prop to localize it)
`series2Label`	`string`	`"系列 B"`	Name of the second series (the built-in default is Traditional Chinese for "Series B", so pass this prop to localize it)
`max`	`number`	`100`	Value ceiling, corresponding to the outermost ring
`size`	`number`	`320`	Rendered size (px, width = height)
`rings`	`number`	`4`	Number of concentric grid rings
`color`	`string`	`"#6366f1"`	Primary series color (any valid CSS color value)
`color2`	`string`	`"#f59e0b"`	Second series color
`className`	`string`	—	Forwarded to the outermost container

Accessibility

The SVG has a descriptive aria-label that announces every axis label and every series value in full
Each vertex hit area is keyboard focusable (Tab moves through them in order) and shows the tooltip on focus just as on hover, each carrying its own aria-label announcing the value
When the user has "reduce motion" enabled at the system level, the expansion and stroke-drawing animations are skipped and the finished shape is shown directly
Hovering also darkens the matching axis line and label, giving an extra visual cue for lining things up