Bar chart

Categorical comparison chart with optional comparison bars and horizontal rails.

Bar chart is for ranked or categorical values. Keep labels sparse and use comparison bars only when they answer a direct before/after question.

ready

RouterMemoryToolsEval

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

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

ready

RouterMemoryToolsEval

Default

Vertical bars with value labels.

ready

RouterMemoryToolsEval

Comparison

Muted comparison bars behind the primary series.

ready

RouterMemoryToolsEval

Horizontal

Horizontal rail layout for ranked lists.

ready

RouterMemoryToolsEval

Quiet

No value labels for dense cards.

Props

Name	Type	Default	Description
`title *`	`string`	-	Chart title.
`description`	`string`	-	Muted supporting copy.
`points`	`readonly DataPoint[]`	`[]`	Primary bar data.
`comparisonPoints`	`readonly DataPoint[]`	`[]`	Muted comparison bars.
`baseline`	`number`	`0`	Value used as the zero rail for positive or negative bars.
`orientation`	`'vertical' \| 'horizontal'`	`vertical`	Column or rail layout.
`state`	`'ready' \| 'loading' \| 'empty' \| 'error'`	`ready`	Async data state.
`showValues`	`boolean`	`true`	Shows value 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.
`surface`	`'raised' \| 'sunken' \| 'transparent'`	`raised`	Plot stage surface.