BarChart
One measure over time — the admin's spend, day by day or month by month. Thin ink bars up from a hairline, each its share of the tallest; hover a bar for its figure.
Day by day
Past a dozen bars only the first and last are labelled; the rest tell their day on hover. Bars sit 2px apart, rounded at their ends only.
| 1 Oct | $0.04 | 2 bookings |
|---|---|---|
| 2 Oct | $0.06 | 2 bookings |
| 3 Oct | $0.02 | 1 bookings |
| 4 Oct | $0.00 | 0 bookings |
| 5 Oct | $0.09 | 4 bookings |
| 6 Oct | $0.12 | 5 bookings |
| 7 Oct | $0.07 | 3 bookings |
| 8 Oct | $0.05 | 2 bookings |
| 9 Oct | $0.03 | 1 bookings |
| 10 Oct | $0.01 | 0 bookings |
| 11 Oct | $0.00 | 0 bookings |
| 12 Oct | $0.08 | 3 bookings |
| 13 Oct | $0.11 | 4 bookings |
| 14 Oct | $0.10 | 4 bookings |
| 15 Oct | $0.06 | 2 bookings |
| 16 Oct | $0.04 | 2 bookings |
| 17 Oct | $0.02 | 1 bookings |
| 18 Oct | $0.00 | 0 bookings |
| 19 Oct | $0.07 | 3 bookings |
| 20 Oct | $0.13 | 5 bookings |
| 21 Oct | $0.09 | 4 bookings |
| 22 Oct | $0.05 | 2 bookings |
| 23 Oct | $0.06 | 2 bookings |
| 24 Oct | $0.03 | 1 bookings |
| 25 Oct | $0.00 | 0 bookings |
| 26 Oct | $0.04 | 2 bookings |
| 27 Oct | $0.08 | 3 bookings |
import { BarChart } from "@/components/shared/bar-chart";
<BarChart
label="Spend by day"
points={days.map((d) => ({
key: d.start,
label: "1 Oct",
value: d.costUsd,
display: "$0.04",
detail: "2 bookings",
}))}
/>Month by month
Up to a dozen bars, each is labelled under it.
| Aug | $0.40 |
|---|---|
| Sep | $1.90 |
| Oct | $3.20 |
<BarChart label="Spend by month" points={months} />API
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | What it draws — the caption of the table a screen reader gets. |
| points | BarPoint[] | — | key, label, value, display (the value formatted) and an optional detail for the tooltip. |
| className | string | — | Layout only. |
Rules
- One series, in ink. Two measures are two charts, never two axes.
- Name it in the heading over it; one series needs no legend.
- Bars are a picture: the numbers live in its table, and in the figures beside it.