funnel
GraphFunnel
Steps that get narrower as people drop off. Write `- 12,400 docs`. A ranked list is Rank. A process is Flow.
install
- docs12,400
- copy4,10033%
- ship8607%
MDX
```
+------------------ [ INSTALL ] -------------------+
| |
| docs ████████████████████ 12,400 |
| copy ███████------------- 4,100 33% |
| ship █------------------- 860 7% |
| |
+--------------------------------------------------+
```install
command
signup
- visit8,000
- start2,40030%
- verify96012%
- paid1802%
MDX
```
+------------------- [ SIGNUP ] -------------------+
| |
| visit ████████████████████ 8,000 |
| start ██████-------------- 2,400 30% |
| verify ██------------------ 960 12% |
| paid █------------------- 180 2% |
| |
+--------------------------------------------------+
```| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge of the frame. |
| steps | FunnelStep[] | — | label, value, and optional display string for the count. Optional when children are Markdown. |
| children | Markdown | — | - 4,100 copy |
| ticks | number | 20 | Width of the first bar, in characters. |
| stage | string | — | Step label to focus. Other rows recede. |
| glyphs | "shade" | "ascii" | "hash" | "bar" | string[] | "shade" | Character set. shade is ·░▒▓█. ascii is .- =#@. Pass a preset or your own characters. |
| palette | "mono" | "duo" | "multi" | "mono" | mono is one accent plus muted. duo paints the second series with --graph-accent-2. multi cycles three accents. |
| corner | string | "+" | Character at each corner of the frame. |
| className | string | — | Passed to the outer frame. |