Funnel chart
Signup to paid, with the biggest drop called out by the agent.
A funnel chart shows how many people reach each stage in order. Each bar grows in a moment
after the chart appears, the stage that loses the largest share of the one before it is marked
in red, and the agent's insight sits below. With more than one view, a segment switch redraws
the bars top to bottom and crossfades the note.
Usage
<!-- include core.css + funnel-chart.css -->
<div class="fnx panel">
<div class="fnx-h">
<b>Signup to paid</b>
<div class="seg2 fnx-sg" role="group" aria-label="Segment">
<button aria-pressed="true" data-v="all">All</button>
<button aria-pressed="false" data-v="team">Teams</button>
</div>
</div>
<div class="fnx-rows"><!-- rows drawn by funnel-chart.js --></div>
<div class="fnx-ins"><span class="fnx-ic"><!-- spark --></span><span class="fnx-t"></span></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
title | string | Like "Signup to paid". |
stages | string[] | The stages in order, like "Signed up" then "Opened a file". |
views | FunnelChartView[] | One set of numbers per view. With more than one, a switch picks between them. |
view | string | Key of the view shown. Leave it out to let the switch change it. |
defaultView | string | Defaults to the first view. |
onViewChange | (key) => void | Called when the switch picks a view. |
shareLabel | string | Ends a stage's tip, like "of signups" in "51.8% of signups". |
startLabel | string | The first stage's tip. Defaults to "Starting point". |
format | (n) => string | Writes a count. Defaults to whole numbers like 12,400. |
view.key | string | Identifies the view. |
view.label | string | On the switch, like "Teams". |
view.values | number[] | How many reached each stage, in order. |
view.insight | string | The agent's note under the funnel for this view. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The card
sits on a surface and the bars run from the first chart colour (--dm-c1, the accent) down to the
next (--dm-c2), so each stage reads a shade apart; the biggest drop uses the bad tone and the
agent's note tints with the accent — all from the theme tokens. In the default style the bars carry
a light accent edge on the track; in Soft they are flat fills.