Stats & Numbers
Bullet Chart KPI
The 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.
$ velocityx add bullet-chart-kpiBuilt for astro.
Full docs for Bullet Chart KPI →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Revenue (Q3)
$275k target $250k| Value | $275k |
|---|---|
| Target | $250k |
| Poor range up to | 100 |
| Satisfactory range up to | 200 |
| Good range up to | 300 |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| label | string | No | 'Revenue (Q3)' | |
| value | number | No | 275 | |
| target | number | No | 250 | |
| max | number | No | Upper bound of the scale. Defaults to the highest range step. | |
| ranges | number[] | No | [100, 200, 300] | Ascending breakpoints for the qualitative band, e.g. [100, 200, 300]. |
| rangeLabels | string[] | No | ['Poor', 'Satisfactory', 'Good'] | |
| formattedValue | string | No | Pre-formatted override for the value display, e.g. "$275k". | |
| formattedTarget | string | No | Pre-formatted override for the target display, e.g. "$250k". | |
| unit | string | No | '' | |
| 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/bullet-chart-kpi/BulletChartKpi.astroUsing the Bullet Chart KPI component
Install it with velocityx add bullet-chart-kpi.
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.
astroA single large figure that counts up the moment it scrolls into view, paired with a directional change badge. No chart library, no runtime dependency — locale-safe number formatting and a permanent screen-reader value so the real number is never hidden behind the animation.
astro