Data
BarList
A ranked list, with the bar behind the name rather than beside it.
When to reach for it
Examples
default
| Name | Value |
|---|---|
| google.com | 42.1K |
| github.com | 18.8K |
| news.ycombinator.com | 9,400 |
| x.com | 6,120 |
| reddit.com | 3,280 |
| lobste.rs | 1,940 |
| bsky.app | 1,100 |
| linkedin.com | 640 |
limit
| Name | Value |
|---|---|
| google.com | 42.1K |
| github.com | 18.8K |
| news.ycombinator.com | 9,400 |
| Other | 13.1K |
Notes
A ranked list, with the bar behind the name rather than beside it.
The answer to "top referrers", "slowest endpoints", "biggest accounts" — and a better one than a horizontal bar chart, which spends a third of its width on a category axis repeating labels the rows could simply contain. Reading a name off a y-axis and matching it to a bar is two steps; reading it off the bar is none.
It is a <table>, because that is what it is: two columns, a header, and one row per thing. The bar is a background on the name cell, so it never becomes a second element a screen reader has to walk past.
Reach for <BarChart orientation="horizontal"> instead when the categories are few and fixed and the axis is doing real work — a scale a reader needs to read values off, rather than a ranking they need to skim.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | BarListItem[] | — | |
| labelrequired | string | What the list ranks. Required: it names the table for a screen reader. | |
| className | string | — | |
| formatValue | (value: number) => string | defaultTick | Formats each value. Defaults to the same compact form the axes use. |
| limit | number | Keeps the top N and folds the rest into one "Other" row. | |
| max | number | The scale's ceiling. Derived from the largest row when omitted. Pin it to compare two lists side by side — on independent scales the leading row of each fills its track, and two very different numbers look identical. | |
| showLabel | boolean | false | Prints the label above the list instead of hiding it from sight. |
| sort | boolean | true | Sorts descending before rendering. |
Accessibility
- A real <table> with two columns and one row per thing, because that is what a ranked list is. The bar is a background on the name cell, so it is never a second element a screen reader has to walk past.
- limit sums the tail into an “Other” row rather than dropping it — a top five that silently discards the other forty misstates the whole, and the reader has no way to tell.
- Pin max to compare two lists side by side: on independent scales the leading row of each fills its track, and two very different numbers look identical.