XRadar — Radar Chart

A hand-rolled SVG radar chart component, zero third-party dependencies (no ECharts / Canvas library needed). Supports custom dimension data, grid levels, and color themes; works for both single-series and multi-series comparisons.

Live Demo

<XRadar :data="[
  { name: 'Vue', value: 95 },
  { name: 'React', value: 85 },
  { name: 'TypeScript', value: 90 },
  { name: 'Node.js', value: 80 },
  { name: 'CSS', value: 92 },
  { name: 'Webpack', value: 75 }
]" />

Uses default 6-dimension data when data is not provided.

Props

Prop	Type	Default	Description
data	{ name, value }[]	—	Dimension data array
size	number	300	Container width & height (px), square
levels	number	5	Number of grid levels
nameGap	number	12	Gap (px) between labels and the radar edge
areaColor	string	'rgba(64,158,255,0.3)'	Data area fill color
lineColor	string	'#409eff'	Data area stroke color
pointColor	string	'#409eff'	Data point color
pointRadius	number	4	Data point radius (px)
lineWidth	number	2	Data stroke width (px)
labelColor	string	'#666666'	Dimension label color
labelFontSize	number	13	Dimension label font size (px)
gridColor	string	'#e4e7ed'	Grid and radial line color
series	Object[]	[]	Multi-series comparison; takes priority over data when provided, auto-generates a legend and assigns colors
max	number	null	Axis maximum; when omitted, uses the larger of the data maximum and 100

Multi-series Comparison

<XRadar :series="[
  { name: 'Current', data: [{ name: 'Performance', value: 90 }, { name: 'Usability', value: 80 }] },
  { name: 'Competitor', data: [{ name: 'Performance', value: 75 }, { name: 'Usability', value: 85 }] }
]" />

Usage Notes

• Purely SVG-based — no need to install echarts.
• Dimensions are laid out clockwise starting from the top (12 o'clock).
• Pure vector rendering, adapts to the container, no ResizeObserver needed.
• Hovering a data point enlarges it and shows a "dimension: value" tooltip (native <title>).