Radar Chart

One spoke per category; polygons grow from the centre. Labels hide when the chart gets too small.

Usage

SRadarChart({ config: config, data: rows })

Approximate web preview — the HarmonyOS rendering is the reference.

Dots + circle grid

SRadarChart({ config: config, data: rows, dots: true, gridShape: 'circle' })

Approximate web preview — the HarmonyOS rendering is the reference.

Multiple + legend

SRadarChart({ config: devices, data: rows, legend: true })

Approximate web preview — the HarmonyOS rendering is the reference.

Lines only

SRadarChart({ config: devices, data: rows, fillAlpha: 0, lineWidth: 2 })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SRadarChart

shadcn "Radar Chart": one spoke per data row (≥ 3), one filled polygon per series of config. Polygons grow from the centre on appear and morph on data / legend changes. Tap or hover near a spoke for the tooltip of that category. Spoke labels are hidden automatically when the chart is too small for them.

Prop	Type	Default	Description
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
chartHeight	number	250
gridShape	SparkRadarGrid SparkRadarGrid = 'polygon' | 'circle'	'polygon'
dots	boolean	false
fillAlpha	number	0.6	polygon fill opacity (0 → outline only)
lineWidth	number	0	outline width in vp (0 → none)
labels	boolean	true
tooltip	boolean	true
legend	boolean	false
indicator	SparkChartIndicator SparkChartIndicator = 'dot' | 'line' | 'dashed'	'dot'
labelFormatter	(label: string) => string	identityLabel
valueFormatter	(value: number) => string	defaultValue
emptyText	ResourceStr	$r('app.string.spark_no_data')

Event	Type	Default	Description
onActiveChange	(index: number) => void	() => { }