Data

RankBars

A ranked list where the bar is the second reading of the number: platform mix, top pages, spend by campaign.

RankBars

import { RankBars } from '@anomalia/ui';

Notes

Horizontal, so the label sits on the same line as its mark. Nothing is rotated, nothing is truncated to fit a band, and no legend is needed to match a colour back to a name.
One colour for every bar. The categories have no natural order, so darkening the biggest would double-encode length as hue and burn the only free channel on information the bar already shows.
Each row is a real meter with its value, bounds and text in the accessibility tree — the bar is never the only way to read the number.
share rescales against the total instead of the largest row. Those are different questions and they look identical unless the component says which one it is answering.
limit folds the tail into one "Other" row. Past a handful of rows a ranked list stops being scannable, and the answer is never a longer list.

Examples

Mix

One colour for every bar: the categories have no natural order, so darkening the biggest would double-encode the length as hue and burn the only free channel on something the bar already shows.

Reach by channel

Instagram 61.2K +12%
TikTok 16.8K +41%
LinkedIn 13.4K +8%
YouTube 4,200 −3%
Other 3,200

Scaled to the largest row.

Share of reach

Instagram 62% +12%
TikTok 17% +41%
LinkedIn 14% +8%
YouTube 4.3% −3%
Other 3.2%

Scaled to the total — a different question.

API

Prop	Type	Default	Description
`data`	`RankDatum[]`	—	`{ label, value, color?, meta? }`.
`share`	`boolean`	`false`	Scale to the sum and print percentages.
`sort`	`boolean`	`true`	Descending. Off preserves a meaningful sequence.
`limit`	`number \| null`	—	Top n, with the rest folded into "Other".
`labelWidth`	`string`	`'7.5rem'`	Fixed label column, so every bar starts on one line.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.