Comparison Bars
`ComparisonBars` compares a small dataset against one shared baseline. Use it for current/target, before/after and compact plan comparisons.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
ComparisonBars compares a small dataset against one shared baseline. Use it for current/target, before/after and compact plan comparisons.
Two to six items is the useful range. Avoid truncated baselines, unrelated units, negative/diverging data or chart dashboards. Labels and values must stay visible at narrow widths.
Each row is keyboard focusable and has a complete accessible label; color is not the only signal. Reduced motion resolves widths immediately. Use a full chart when axes, uncertainty or many categories matter.
Source: packages/skills/data/comparison-bars.md