Area Chart

Filled areas, optionally stacked or with a gradient fill.

Usage

SAreaChart({ config: config, data: rows, indicator: 'line' })

Approximate web preview — the HarmonyOS rendering is the reference.

Stacked

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

Approximate web preview — the HarmonyOS rendering is the reference.

Gradient

SAreaChart({ config: devices, data: rows, stacked: true, gradient: true })

Approximate web preview — the HarmonyOS rendering is the reference.

Axes

SAreaChart({ config: devices, data: rows, curve: 'linear', valueAxis: true })

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SAreaChart

shadcn "Area Chart": filled areas (optionally stacked, gradient fill).

Prop	Type	Default	Description
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
chartHeight	number	0
curve	SparkChartCurve SparkChartCurve = 'linear' | 'monotone' | 'step'	'monotone'
stacked	boolean	false
gradient	boolean	false	vertical gradient fill instead of a flat areaOpacity fill
areaOpacity	number	0.4
dots	boolean	false
lineWidth	number	2
grid	boolean	true
categoryAxis	boolean	true
valueAxis	boolean	false
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	() => { }