/// Charts
BarsList
A hand-rolled labelled horizontal bar list: each row is a mono label, a sharp value-share fill, and a tabular value.
import { BarsList } from "@protocore/pds";Import path
BarsList ships from the `@protocore/pds/charts` subpath. Like PercentageBarChart it is hand-rolled tokened markup — no recharts dependency — so it packs into a card or a stat row anywhere.
import { BarsList } from "@protocore/pds/charts";
import { ChartContainer } from "@protocore/pds";Basics
Pass data as { label, value } rows. Each bar fills to its share of the domain max (the largest value, or an explicit max); the label reads mono UPPER and the value is tabular. Rows colour from the ramp by position.
When to use it
Use BarsList for a *compact ranked list* — top routes by requests, error counts by service, storage by bucket — where you want the label, a bar, and the exact value on one row. It reads more tightly than a full BarChart and needs no plotting axis. For a single whole split into parts use a PercentageBarChart.
Sort rows by value before passing, and set an explicit max to compare two lists on the same scale.
Usage
Do
- Sort rows descending by value so the list reads as a ranking.
- Pass an explicit `max` to compare two lists on one scale.
- Give each row a readable `label` — it drives the aria summary.
- Spend a signal `color` on the one row that matters.
Don't
- Don't use it for a part-to-whole split — that's a PercentageBarChart.
- Don't round the bars or add shadows; keep the geometry sharp.
- Don't colour every row brightly — the ramp ranks by luminance.
- Don't import it from `@protocore/pds`; it lives on the `/charts` subpath.
Accessibility
- The list exposes `role="img"` with an aria-label composed from each row's label and value (override via `label`).
- Bar length encodes value independently of colour, so the ranking stays readable in grayscale.
- Each row prints its exact value in tabular figures beside the bar.
BarsList props
| Prop | Type | Default | Description |
|---|---|---|---|
data * | BarsListItem[] | — | Rows in draw order, top → bottom. `BarsListItem` = `{ key?: string; label: ReactNode; value: number; color?: string }`. |
max | number | largest value in data | Domain max; a bar's width is `value / max`. |
thickness | number | 8 | Bar thickness in px. |
formatValue | (value: number, item: BarsListItem) => string | String(value) | Format a row's value for display. |
label | string | auto-composed | Accessible summary (role=img aria-label). Composed from rows when omitted. |