Preview Updated 2026-05-10

Radar chart

Multi-dimensional comparison polygon chart with multi-series support.

Basic usage

Data is passed via props and rendered as pure SVG, with no third-party charting dependency. Colors are drawn from the --viz-1..8 tokens and are colorblind-friendly.

A 方案
B 方案

src/App.vue vue

<CfRadarChart ... />

src/App.tsx tsx

<CfRadarChart ... />

Multi-series comparison

Compare three options across six dimensions, cycling through --viz-*.

当前架构
提议方案
保守方案

src/App.vue vue

<CfRadarChart :axes="axes" :series="threeSeries" />

src/App.tsx tsx

<CfRadarChart axes={axes} series={threeSeries} />

API

Prop	Type	Default	Description
`axes`	`string[]`	`—`	Axis names
`series`	`RadarSeries[]`	`—`	{ name, values: number[], colorIndex? }[]
`size`	`number`	`240`
`max`	`number`	data max	Normalization baseline