Stacked Bar Chart

CwStackedBarChart compares how several categories add up over time, such as traffic counts per hour. Colours come from the shared --cw-chart-cat-* palette and follow the document theme, the legend toggles series, and bars, ticks and tooltips format values with your formatValue function.

Basic usage

Show legend

Click a legend item to hide a series. The last visible series can't be hidden. Switch the theme in the header to see the palette follow it.

<script lang="ts">
	import { CwStackedBarChart } from '@cropwatchdevelopment/cwui';
	import type { CwStackedBarBucket, CwStackedBarCategory } from '@cropwatchdevelopment/cwui';

	const categories: CwStackedBarCategory[] = [
		{ id: 'car', label: 'Cars' },
		{ id: 'truck', label: 'Trucks' }
	];

	const buckets: CwStackedBarBucket[] = [
		{ key: '2026-09-23T06:00', label: '06:00', values: { car: 42, truck: 9 } },
		{ key: '2026-09-23T07:00', label: '07:00', values: { car: 58, truck: 12 } }
	];
</script>

<CwStackedBarChart {categories} {buckets} height={280} />

Hidden series and value formatting

initialHidden starts with Bicycles and Pedestrians switched off, and formatValue adds a unit to ticks and tooltips.

Loading and no data

No buckets

No data available

Custom message

No traffic recorded today

<!-- Skeleton bars while data loads -->
<CwStackedBarChart {categories} {buckets} loading={isLoading} />

<!-- Empty buckets show the shared no-data overlay automatically -->
<CwStackedBarChart {categories} buckets={[]} />

<!-- Custom message -->
<CwStackedBarChart {categories} buckets={[]} noData="No traffic recorded today" />

API

Usage and API reference

CwStackedBarChart shows how several categories add up per bucket, such as counts per hour. Colours come from the `--cw-chart-cat-*` tokens and follow the document theme; the legend toggles series and never hides the last one.

How to think about it

Define categories in stack order `categories` is bottom-of-stack first. Give each a stable `id` and a translated `label`; `color` is optional.
One bucket per bar `buckets` holds a `key`, a pre-formatted `label`, and a `values` map from category id to number.
Format values with your locale `formatValue` is used for ticks, tooltips and accessible bar labels.
Let the states take care of themselves `loading` shows skeleton bars. With no buckets, or when everything is zero, the no-data overlay appears automatically.

Props and callbacks

API	Type	Details
`categories`	`CwStackedBarCategory[]`	Series in stack order: `{ id, label, color? }`.
`buckets`	`CwStackedBarBucket[]`	Bars in x-axis order: `{ key, label, values }`.
`initialHidden`	`string[]`	Category ids hidden on first render.
`height`	`number`	Plot height in pixels.
`showLegend` Default: `true`	`boolean`	Shows the interactive legend.
`formatValue`	`(value: number) => string`	Formats ticks, tooltips and accessible labels.
`loading` Default: `false`	`boolean`	Shows skeleton bars.
`noData`	`string \| boolean`	Forces the no-data overlay, optionally with custom text. Automatic when omitted.
`theme`	`'light' \| 'dark'`	Forces a fixed palette. Omit it to follow the document theme.
`labels`	`CwStackedBarChartLabels`	`ariaLabel`, `total`, `barLabel(label, total)`, `loading`.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Counts per hour

<script lang="ts">
	import { CwStackedBarChart } from '@cropwatchdevelopment/cwui';

	const categories = [
		{ id: 'car', label: 'Cars' },
		{ id: 'truck', label: 'Trucks' }
	];
	const buckets = [
		{ key: '06:00', label: '06:00', values: { car: 42, truck: 9 } },
		{ key: '07:00', label: '07:00', values: { car: 58, truck: 12 } }
	];
</script>

<CwStackedBarChart {categories} {buckets} height={280} />