Stats & Numbers
Percentage Split Bar
A single horizontal bar divided into labelled proportions — traffic sources, plan mix, budget allocation — with a legend underneath carrying the exact share for every segment. Built for the "these parts make one hundred percent" read in one horizontal sweep, with a table fallback for anyone who can't read the bar visually.
$ velocityx add percentage-split-barBuilt for astro.
Full docs for Percentage Split Bar →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Traffic by source
100 total- Organic search 48%
- Direct 24%
- Referral 16%
- Social 8%
- Other 4%
| Segment | Value | Share |
|---|---|---|
| Organic search | 48 | 48% |
| Direct | 24 | 24% |
| Referral | 16 | 16% |
| Social | 8 | 8% |
| Other | 4 | 4% |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | 'Traffic by source' | |
| segments | SplitSegment[] | No | [ { label: 'Organic search', value: 48 }, { label: 'Direct', value: 24 }, { label: 'Referral', value: 16 }, { label: 'Social', value: 8 }, { label: 'Other', value: 4 }, ] | |
| totalLabel | string | No | Pre-formatted override for the total, shown beside the title. | |
| locale | string | No | 'en-US' | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/percentage-split-bar/PercentageSplitBar.astroUsing the Percentage Split Bar component
Install it with velocityx add percentage-split-bar.
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