Line Chart

Trends over categories; monotone ("natural"), linear or step curves.

Usage

SLineChart({ config: config, data: rows, labelFormatter: (s: string) => s.substring(0, 3) })

Approximate web preview — the HarmonyOS rendering is the reference.

Linear with dots

SLineChart({ config: config, data: rows, curve: 'linear', dots: true })

Approximate web preview — the HarmonyOS rendering is the reference.

Step

SLineChart({ config: config, data: rows, curve: 'step' })

Approximate web preview — the HarmonyOS rendering is the reference.

Multiple

Several series, value axis, legend (tap to toggle).

SLineChart({ config: devices, data: rows, valueAxis: true, legend: true, dots: true })

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SLineChart

shadcn "Line Chart": one line per series of config, categories from data rows.

Hover (pointer), tap or pan horizontally to show the crosshair and tooltip.

Prop	Type	Default	Description
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
chartHeight	number	0	height in vp; 0 → responsive 16:9 of the measured width (160–320)
curve	SparkChartCurve SparkChartCurve = 'linear' | 'monotone' | 'step'	'monotone'	'monotone' (shadcn "natural"), 'linear' or 'step'
dots	boolean	false
lineWidth	number	2
grid	boolean	true
categoryAxis	boolean	true	category labels (x axis)
valueAxis	boolean	false	value ticks (y axis)
tooltip	boolean	true
legend	boolean	false
indicator	SparkChartIndicator SparkChartIndicator = 'dot' | 'line' | 'dashed'	'line'
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	() => { }