Stats & Numbers
Funnel Conversion Chart
Turns a signup, checkout or sales pipeline into a descending set of stage bars, with the step-over-step conversion rate and the raw drop-off count called out next to each one — so the question 'where are we losing people' is answered on sight, not after opening a tooltip.
$ velocityx add funnel-conversion-chartBuilt for astro.
Full docs for Funnel Conversion Chart →
Needs a licence key —
subscribe here, then
velocityx loginonce.
| Stage | Count | % of top of funnel | Step conversion | Dropped |
|---|---|---|---|---|
| Visited pricing | 24,800 | 100% | — | — |
| Started signup | 9,120 | 37% | 36.8% | 15,680 |
| Verified email | 6,430 | 26% | 70.5% | 2,690 |
| Added payment | 3,380 | 14% | 52.6% | 3,050 |
| Activated | 2,510 | 10% | 74.3% | 870 |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | 'Signup funnel — last 30 days' | |
| stages | FunnelStage[] | No | [ { label: 'Visited pricing', value: 24800 }, { label: 'Started signup', value: 9120 }, { label: 'Verified email', value: 6430 }, { label: 'Added payment', value: 3380 }, { label: 'Activated', value: 2510 }, ] | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/funnel-conversion-chart/FunnelConversionChart.astroUsing the Funnel Conversion Chart component
Install it with velocityx add funnel-conversion-chart.
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