Stats & Numbers
Horizontal Bar Ranking
A ranked top-N list — top pages, top referrers, top SKUs — where bar length shows magnitude and every label and value stays fully legible outside the fill, never clipped or reversed on dark mode. Auto-sorts descending, prints the rank number on every row, and ships an exact-value table fallback for anyone who can't read the bars visually.
$ velocityx add horizontal-bar-rankingBuilt for astro.
Full docs for Horizontal Bar Ranking →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Top referrers
- Rank 1: google.com 18,420
- Rank 2: Direct 9,310
- Rank 3: twitter.com 4,120
- Rank 4: newsletter 2,860
- Rank 5: reddit.com 1,140
| Rank | Label | Value |
|---|---|---|
| 1 | google.com | 18,420 |
| 2 | Direct | 9,310 |
| 3 | twitter.com | 4,120 |
| 4 | newsletter | 2,860 |
| 5 | reddit.com | 1,140 |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | 'Top referrers' | |
| rows | RankingRow[] | No | [ { label: 'google.com', value: 18420 }, { label: 'Direct', value: 9310 }, { label: 'twitter.com', value: 4120 }, { label: 'newsletter', value: 2860 }, { label: 'reddit.com', value: 1140 }, ] | |
| preserveOrder | boolean | No | false | Skip the built-in descending sort — caller has already ordered rows. |
| limit | number | No | Cap the number of rows rendered. | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/horizontal-bar-ranking/HorizontalBarRanking.astroUsing the Horizontal Bar Ranking component
Install it with velocityx add horizontal-bar-ranking.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Stats & Numbers.
Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.
astroPuts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual.
astroOne headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users.
astroThe compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually.
astro