Stacked bar chart

Composition chart for small category stacks across time or groups.

Stacked bar chart is for composition, not precise comparison. Keep the segment count low and prefer normalized bars when the share is more important than total volume.

DOM render JPEG render

Run composition

ready

SearchReasoningTools

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Rendered matrix.

Every state maps to the same component render route through the `state` query param.

Run composition

ready

SearchReasoningTools

Default

Vertical stacked composition.

/render state

Run composition

ready

SearchReasoningTools

Normalized

Normalized 100% composition.

/render state

Run composition

ready

SearchReasoningTools

Horizontal

Rail layout for compact summaries.

/render state

Props

Public contract.

Name	Type	Default	Description
`title *`	`string`	-	Chart title.
`description`	`string`	-	Muted supporting copy.
`groups`	`readonly StackedBarGroup[]`	`[]`	Stacked bar groups.
`normalized`	`boolean`	`false`	Normalizes each group to 100%.
`orientation`	`'vertical' \| 'horizontal'`	`vertical`	Column or rail layout.
`state`	`'ready' \| 'loading' \| 'empty' \| 'error'`	`ready`	Async data state.
`showValues`	`boolean`	`true`	Shows group total labels.
`showGrid`	`boolean`	`true`	Shows horizontal grid rules in vertical mode.
`showXAxis`	`boolean`	`true`	Shows axis labels in vertical mode.
`showYAxis`	`boolean`	`true`	Shows tick labels in vertical mode.
`height`	`number`	`220`	SVG plot height.
`legend`	`boolean`	`true`	Shows derived legend indicators.