Components
BarChart
Token-driven bar chart with one or two series, optional diverging baseline, legend, and tooltips.
How it works
Bar fills come from the chart ramp (CHART_RAMP), so every color resolves from
a --cajon-* slot and the chart re-themes automatically — no canvas, no
charting library. Heights are proportional inline percentages. The chart is
exposed as role="img" with a summary label, so it is not color-only.
Pass diverging with two series to grow the second series downward from a
center baseline — the income/expense pattern shown above.
Usage
import { BarChart } from '@cajon-ui/react';
<BarChart
categories={['Jan', 'Feb', 'Mar', 'Apr']}
series={[
{ label: 'Income', data: [5.6, 3.8, 4.6, 6.6] },
{ label: 'Expense', data: [4.2, 4.6, 4.0, 5.2] },
]}
diverging
aria-label="Monthly income versus expense"
/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
categories | string[] | — | Category labels along the x-axis |
series | BarSeries[] | — | One or two { label, data, color? } series |
max | number | largest value | Max value used for scaling |
diverging | boolean | false | Grow the second series downward from center |
showLegend | boolean | true | Show the legend |
showTooltip | boolean | true | Show a value tooltip on hover |
colors | string[] | CHART_RAMP | Override series colors by index |
aria-label | string | series summary | Accessible summary |