Bar Chart

Grouped or stacked bars, vertical or horizontal, with rounded corners (--radius-md by default).

Usage

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

Approximate web preview — the HarmonyOS rendering is the reference.

Multiple

SBarChart({ config: devices, data: rows, indicator: 'dashed' })

Approximate web preview — the HarmonyOS rendering is the reference.

Stacked + legend

Only the outer ends of a stack are rounded.

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

Approximate web preview — the HarmonyOS rendering is the reference.

Horizontal

SBarChart({ config: config, data: rows, horizontal: true, valueAxis: true })

Approximate web preview — the HarmonyOS rendering is the reference.

Negative

Bars grow from the zero line in both directions.

SBarChart({ config: visitors, data: profit, valueAxis: true, barRadius: 4 })

Approximate web preview — the HarmonyOS rendering is the reference.

Interactive

Switching the series grows the new bars in.

@Local series: string = 'desktop';

SToggleGroup({ type: 'single', value: [this.series], onValueChange: … }) {
  SToggleGroupItem({ value: 'desktop', text: 'Desktop' })
  SToggleGroupItem({ value: 'mobile', text: 'Mobile' })
}
SBarChart({ config: this.series === 'desktop' ? desktopConfig : mobileConfig, data: rows })

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SBarChart

shadcn "Bar Chart": grouped or stacked bars, vertical or horizontal, rounded corners (barRadius, default --radius-md; stacked bars round only the outer ends).

Prop	Type	Default	Description
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
chartHeight	number	0
stacked	boolean	false
horizontal	boolean	false	horizontal bars (categories on the vertical axis; Recharts layout="vertical")
barRadius	number	-1	corner radius in vp; -1 → theme radius-md
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	() => { }