Radar Chart ^0.1.18

Multi-axis comparison. Perfect for skills, feature comparisons, performance profiles, and multi-criteria evaluation.

Basic

This quarter

<VxRadarChart
  :data="[{ name: 'This quarter', data: [90, 75, 82, 68, 72, 85] }]"
  :axes="['Code','Design','Product','Marketing','Sales','Support']"
/>

Compare two

Player A

Player B

<VxRadarChart :data="players" :axes="skills" />

Three series

Tesla Model 3

Toyota Camry

BMW 3 Series

<VxRadarChart :data="cars" :axes="['Comfort','Mileage','Price','Safety','Style','Tech']" />

Custom colors

Keto

Mediterranean

Vegan

<VxRadarChart
  :data="[
    { name: 'Keto',          data: [85, 15, 92, 45, 70, 80], color: '#ef4444' },
    { name: 'Mediterranean', data: [70, 65, 55, 85, 92, 88], color: '#22c55e' },
    { name: 'Vegan',         data: [55, 80, 40, 95, 85, 75], color: '#f59e0b' },
  ]"
  :axes="nutrition"
/>

Circular grid

Player A

Player B

<VxRadarChart :data="data" :axes="axes" gridShape="circle" />

Security audit (10-scale)

Current

<VxRadarChart :data="data" :axes="security" :max="10" :levels="5" valueLabels />

Before / After

Before

After

<VxRadarChart
  :data="[
    { name: 'Before', data: [5, 6, 4, 5, 7] },
    { name: 'After',  data: [9, 9, 8, 9, 9] },
  ]"
  :axes="['Speed','Usability','Accessibility','Beauty','Features']"
  :max="10"
/>

Interactive playground

Fill opacity0.25GridPolygonCircle

Player A

Player B

Props

Prop	Type	Default	Description
data	RadarChartSeries[]	[]	Array of { name, data, color? }
axes	string[]	[]	Labels for each axis
size	number	320	SVG size
max	number	auto	Maximum value (outer ring)
levels	number	5	Grid ring count
colors	string[]	[]	Palette override
fillOpacity	number	0.22	Polygon fill opacity
strokeWidth	number	2	Polygon stroke width
dots	boolean	true	Show vertex dots
dotRadius	number	3	Dot radius
gridShape	'polygon' | 'circle'	'polygon'	Grid style
axisLabels	boolean	true	Show axis names
valueLabels	boolean	false	Show ring values
legend	boolean	true	Show legend
startAngle	number	-90	First axis angle
animate	boolean	true	Animate in