Bar Chart
Comparison across categories, in six layouts covering grouped, stacked, negative, and horizontal.
Highlighting one bar
active keeps one bar emphasised at rest rather than only on hover, for when the chart exists to make a point about a particular period.
Grouped vs stacked
Grouped (multiple) compares series against each other; stacked compares each series against the total. Stacking makes the first series easy to read and every one above it hard, so put the series people care about most at the bottom.
Horizontal
Negative values
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number; value2?: number }[] | One entry per bar. value2 adds a second series. | |
| variant | 'default' | 'active' | 'multiple' | 'stacked' | 'negative' | 'horizontal' | 'default' | Multiple puts series side by side, stacked puts them on top of each other, negative draws a zero line, horizontal flips the axes. |
| seriesLabels | [string, string?] | Names for value and value2, shown for multiple and stacked. | |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Preset height. |