https://framer.com/m/Leaderboardbars-wLDCas.js@waajjAGlYmTYcE2rbth0
Io / Enhancements / LeaderboardBars
LeaderboardBars
LeaderboardBars turns one JSON payload into a row of ranked bar panels — each sorted on its own terms, value-formatted, and marked with the vendor logo it belongs to.
Examples
Live specimens for every control the component exposes. The figures throughout this page are the component author’s illustrative sample set — they are not a measurement of any real model.
Default
One panels array in AI Schema; every other control left alone. Columns is 1 here so each board gets the full width of this column — leave it at 0 and the panels wrap on their own at Min Width instead. Each item carries its own colour, its vendor mark and a hover note.
Scale and baseline
baseline lifts the axis start so near-identical scores stop looking identical. “auto” always lands the shortest bar at exactly half height whatever the range; a number sets the start explicitly. Axis Note prints that start under the plot.
No baseline — zero-based
baseline “auto”
baseline 50
Value format and sorting
sort reorders each panel on its own — desc, asc, or none to keep the order you wrote. prefix, suffix and decimals format every value label. Label In % is the bar height below which a value stops sitting inside its bar and moves above it.
sort asc · prefix $ · decimals 2
sort desc — same five figures
sort none · suffix % · decimals 1
Logos, notes and labels
An item may name a mark from the built-in vendor registry, a URL, or a raw SVG string. With Auto Logo on the mark is inferred from the label instead, falling back to the label’s initial when no vendor matches. A note on an item adds a circled i with a hover tooltip. Label Angle 0 lays the labels flat, which only works with short ones.
Logos off — notes still show
Label Angle 0 — short labels
Auto Logo — no logo keys at all
Props
The controls on the instance panel, then the keys of the AI Schema payload. Four of the panel controls appear only while Logos is on, Duration and Stagger only while Animate is on, Min Width only while Columns is 0, and Label Area only while Label Angle is above 0.
Usage
Guidance carried over from the component definition.
Reach for LeaderboardBars
A ranked comparison where the order is the whole point — model benchmarks, vendor scorecards, regional results.
Several metrics share one set of contenders: a panel each, each sorted and formatted on its own terms.
The figures arrive as JSON and change often — the entire board is one AI Schema string.
The bars must carry vendor identity: the built-in mark registry labels each one without uploading an asset.
Reach for something else
The data is a trend over time, or stacked, grouped, pie or radar — use ChartX or ChartX2.
The reader needs to scan exact figures cell by cell rather than compare heights — use TableX.
It is one number with nothing to compare it against — use CounterPro.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.