Component

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.
data
DOM renderImage render
Bar chartDefault

Capability score

ready

Playground

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

Loading playground

Rendered matrix

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

Default

Vertical bars with value labels.

Capability score

ready
RouterMemoryToolsEval
Render state

Comparison

Muted comparison bars behind the primary series.

Capability score

ready
RouterMemoryToolsEval
Render state

Horizontal

Horizontal rail layout for ranked lists.

Capability score

ready
RouterMemoryToolsEval
Render state

Quiet

No value labels for dense cards.

Capability score

ready
RouterMemoryToolsEval
Render state

Compact

Headerless horizontal bars for dense scorecards.
Render state

Loading

Stable loading state for async generated output.

Capability score

loading
Loading data
Render state

Empty

No-data state inside the bar chart shell.

Capability score

empty
No data
Render state

Error

Failed data state with an explicit message.

Capability score

error
Could not load capability scores.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
title *string-Chart title.
descriptionstring-Muted supporting copy.
pointsreadonly DataPoint[][]Primary bar data.
comparisonPointsreadonly DataPoint[][]Muted comparison bars.
baselinenumber0Value used as the zero rail for positive or negative bars.
orientation'vertical' | 'horizontal'verticalColumn or rail layout.
state'ready' | 'loading' | 'empty' | 'error'readyAsync data state.
showValuesbooleantrueShows value labels.
showGridbooleantrueShows horizontal grid rules in vertical mode.
showXAxisbooleantrueShows axis labels in vertical mode.
showYAxisbooleantrueShows tick labels in vertical mode.
heightnumber220SVG plot height.
legendbooleantrueShows derived legend indicators.
surface'raised' | 'sunken' | 'transparent'raisedPlot stage surface.