Funnel Chart
How many pass each step of a process — visits, sign-ups, trials, purchases — with the conversion from the step before. Drawn as SVG by the component, rendered on the server and themed by the design tokens.
Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).
Basic
Centred bars sized by value with soft connectors and the conversion from the step before. Hover a step: the tooltip adds its share of the first step.
| Category | Value | Of first | Conversion |
|---|---|---|---|
| Visited the site | 12,400 | 100% | — |
| Opened pricing | 5,300 | 42.7% | 42.7% |
| Started sign-up | 2,100 | 16.9% | 39.6% |
| Confirmed email | 1,450 | 11.7% | 69% |
| Paid | 380 | 3.1% | 26.2% |
Colorful
colorful gives every step its own palette colour; color on an item sets one step.
| Category | Value | Of first | Conversion |
|---|---|---|---|
| Applied | 640 | 100% | — |
| Screened | 210 | 32.8% | 32.8% |
| Interviewed | 64 | 10% | 30.5% |
| Offered | 12 | 1.9% | 18.8% |
| Hired | 9 | 1.4% | 75% |
Compact
Without labels, conversions and connectors the funnel shrinks to bars and values — handy in a small card. The tooltip still names each step.
| Category | Value | Of first | Conversion |
|---|---|---|---|
| Carts | 48K | 100% | — |
| Checkouts | 21K | 43.8% | 43.8% |
| Orders | 15.5K | 32.3% | 73.8% |
Events
stageClick reports the clicked step with its value, its share of the first step and the conversion from the step before.
| Category | Value | Of first | Conversion |
|---|---|---|---|
| Leads | 800 | 100% | — |
| Qualified | 340 | 42.5% | 42.5% |
| Proposals | 120 | 15% | 35.3% |
| Won | 45 | 5.6% | 37.5% |
Click a step.
Loading and empty
loading keeps the size with a skeleton; empty items (or only zeros) show "No data".
Live
New items redraw in place — bars and connectors slide to their new widths.
| Category | Value | Of first | Conversion |
|---|---|---|---|
| Visits | 1,000 | 100% | — |
| Product views | 540 | 54% | 54% |
| Carts | 178 | 17.8% | 33% |
| Orders | 110 | 11% | 61.8% |
Accessibility
Tab to the chart: ↑/↓ walk the steps and each one is announced with its value and conversion; Home / End jump to the ends. The summary ends with the overall conversion; screen readers also get a hidden table.
| Category | Value | Of first | Conversion |
|---|---|---|---|
| Opened | 860 | 100% | — |
| Answered | 790 | 91.9% | 91.9% |
| Solved | 610 | 70.9% | 77.2% |
Design tokens
dt sets the gap between rows (share of a row), the radius, the label column, the text and the connectors of one chart.
| Category | Value | Of first | Conversion |
|---|---|---|---|
| Enrolled | 900 | 100% | — |
| Started | 720 | 80% | 80% |
| Halfway | 410 | 45.6% | 56.9% |
| Finished | 260 | 28.9% | 63.4% |
Pass through
pt reaches the parts — stage, connector, label, value, conversion, plot, tooltip and more.
| Category | Value | Of first | Conversion |
|---|---|---|---|
| Store views | 30,000 | 100% | — |
| Installs | 9,000 | 30% | 30% |
| Accounts | 4,200 | 14% | 46.7% |
Unstyled
unstyled removes the tectra styles: no tokens, no rounding, no motion — the geometry, the colours, the tooltip and the keyboard stay, ready for your own CSS.
| Category | Value | Of first | Conversion |
|---|---|---|---|
| Step 1 | 100 | 100% | — |
| Step 2 | 60 | 60% | 60% |
| Step 3 | 25 | 25% | 41.7% |