Radial Chart

Concentric radial bars with an optional track and centre label.

Usage

SRadialChart({ config: browsers, data: rows, valueKey: 'visitors' })

Approximate web preview — the HarmonyOS rendering is the reference.

Text

SRadialChart({
  config: browsers, data: [new SparkChartRow('safari', { 'visitors': 200 })], valueKey: 'visitors',
  maxValue: 280, endAngle: 250, innerRatio: 0.7, centerValue: '200', centerLabel: 'Visitors'
})

Approximate web preview — the HarmonyOS rendering is the reference.

Shape

Partial sweep, square ends, no track.

SRadialChart({ config: browsers, data: rows, valueKey: 'visitors', endAngle: 270, rounded: false, track: false })

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SRadialChart

shadcn "Radial Chart": one concentric bar per data row (first row innermost; row label = key in config), its sweep proportional to valueKey / maxValue between startAngle and endAngle (degrees, 0 = 12 o'clock, clockwise). Optional muted track, rounded ends and a centre label. Bars sweep in on appear.

Prop	Type	Default	Description
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
valueKey	string	'value'
startAngle	number	0
endAngle	number	360
maxValue	number	0	value that fills a whole ring; 0 → the largest value
innerRatio	number	0.3	inner radius as a fraction of the outer radius
ringGap	number	4	gap between rings in vp
track	boolean	true
rounded	boolean	true
chartHeight	number	250
centerValue	string	''
centerLabel	string	''
tooltip	boolean	true
legend	boolean	false
indicator	SparkChartIndicator SparkChartIndicator = 'dot' | 'line' | 'dashed'	'dot'
valueFormatter	(value: number) => string	defaultValue
emptyText	ResourceStr	$r('app.string.spark_no_data')

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