Pie Chart

Pie and donut charts. Slices sweep in, the hovered / tapped slice grows, the legend toggles slices.

Usage

// row label = slice key in the config (label + colour)
SPieChart({ config: browsers, data: rows, valueKey: 'visitors' })

Approximate web preview — the HarmonyOS rendering is the reference.

Donut with text

SDonutChart({ config: browsers, data: rows, valueKey: 'visitors', centerValue: '1,125', centerLabel: 'Visitors' })

Approximate web preview — the HarmonyOS rendering is the reference.

Separated + legend

SPieChart({ config: browsers, data: rows, valueKey: 'visitors', padAngle: 2, legend: true })

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SPieChart

shadcn "Pie Chart" / "Donut": one slice per data row (row label = slice key in config, which gives its label and colour), sized by valueKey. Slices sweep in on appear and morph when data or the legend change. Tap / hover a slice for its tooltip; the active slice grows (activeGrow).

Prop	Type	Default	Description
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
valueKey	string	'value'	the row value drawn as slice size
innerRatio	number	0	inner radius as a fraction of the outer radius (0 = pie, ~0.6 = donut)
padAngle	number	0	gap between slices in degrees
chartHeight	number	250	maximum diameter in vp (the chart is square and never wider than its container)
centerValue	string	''	big text in the middle of a donut (e.g. the total)
centerLabel	string	''
activeGrow	boolean	true
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	() => { }

SDonutChart

SPieChart with a hole (innerRatio 0.6) and an optional centre label (shadcn "Pie Chart - Donut Text").

Prop	Type	Default	Description
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
valueKey	string	'value'
innerRatio	number	0.6
padAngle	number	0
chartHeight	number	250
centerValue	string	''
centerLabel	string	''
activeGrow	boolean	true
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	() => { }