Chart

Beautiful charts drawn natively with ArkUI Path shapes, styled with the chart-1…5 tokens. Describe series once with SparkChartConfig; every chart measures its own width, thins its labels, animates in with motion key "chart", and shows a shadcn tooltip on hover, tap or horizontal pan.

Usage

// 1. describe the series (shadcn ChartConfig)
const config = new SparkChartConfig([
  new SparkChartSeries('desktop', 'Desktop', 'chart-1'),
  new SparkChartSeries('mobile', 'Mobile', 'chart-2')
]);
// 2. rows: a category label + a value per series key
const data: SparkChartRow[] = [
  new SparkChartRow('January', { 'desktop': 186, 'mobile': 80 }),
  new SparkChartRow('February', { 'desktop': 305, 'mobile': 200 }),
  // …
];

// 3. draw — the container shares legend toggles with the chart
SChartContainer({ config: config, legend: true }) {
  SBarChart({ config: config, data: this.data, labelFormatter: (s: string) => s.substring(0, 3) })
}

Approximate web preview — the HarmonyOS rendering is the reference.

Responsive

No breakpoints: cartesian charts default to a 16:9 box of their own width (160–320vp), skip category labels that would overlap and adapt the number of value ticks to the height.

Sparkline

A tiny inline trend for stat cards and table cells.

SSparkline({ values: [12, 18, 15, 22, 19, 28, 26], color: 'chart-1' })
SSparkline({ values: [30, 26, 27, 21, 23, 18, 15], color: 'destructive', curve: 'linear' })

Approximate web preview — the HarmonyOS rendering is the reference.

Empty state

SChartContainer({ empty }) shows a muted placeholder.

SChartContainer({ config: config, empty: rows.length === 0, emptyText: 'No data for this period' }) {
  SAreaChart({ config: config, data: rows })
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SChartContainer

shadcn ChartContainer: card-friendly frame around one or more charts. Shares series visibility with the charts inside it (SparkContext), renders the legend (legend, tap to toggle) and an empty state. It measures its own width: the legend tightens when the container is narrow.

Prop	Type	Default	Description
config	SparkChartConfig	new SparkChartConfig([])
legend	boolean	false
legendPlacement	SparkChartLegendPlacement SparkChartLegendPlacement = 'top' | 'bottom'	'bottom'
legendToggle	boolean	true	legend entries toggle their series
empty	boolean	false	show the empty state instead of the content
emptyText	ResourceStr	$r('app.string.spark_no_data')
emptyHeight	number	200

Slots: children (trailing closure)

SChartLegend

shadcn ChartLegend + ChartLegendContent: centred, wrapping row of swatches. With interactive, tapping an entry hides / shows that series (shared through state).

Prop	Type	Default	Description
config	SparkChartConfig	new SparkChartConfig([])
state	SparkChartState | undefined	undefined
keys	string[] | undefined	undefined	keys to list (default: every series of the config); pie charts pass their slice keys
interactive	boolean	true
compact	boolean	false

SChartTooltipCard

shadcn ChartTooltipContent: label + one row per series (indicator, name, value).

Prop	Type	Default	Description
title	string	''
items	SparkChartTooltipItem[]	[]
indicator	SparkChartIndicator SparkChartIndicator = 'dot' | 'line' | 'dashed'	'dot'

SChartEmpty

Muted "no data" block.

Prop	Type	Default	Description
text	ResourceStr	$r('app.string.spark_no_data')
boxHeight	number	200

SSparkline

Tiny inline trend line (no axes, no tooltip) — e.g. inside a stat card or a table cell. Fills the width it gets; the value range is the data extent (not forced through 0). Draws in like the other charts.

Prop	Type	Default	Description
values	number[]	[]
color	string	'chart-1'	token name ('chart-1', 'primary' …) or '#hex'
filled	boolean	true
curve	SparkChartCurve SparkChartCurve = 'linear' | 'monotone' | 'step'	'monotone'
chartHeight	number	32
lineWidth	number	1.5
endDot	boolean	false	dot on the last value