Funnel Chart ^0.1.18

Visualize sequential drop-off through stages. Great for conversion funnels, hiring pipelines, sales pipelines, and user journeys.

Basic

<VxFunnelChart
  :data="[
    { label: 'Visitors',     value: 12000 },
    { label: 'Signups',      value: 4800 },
    { label: 'Active users', value: 2200 },
    { label: 'Paid',         value: 680 },
    { label: 'Retained',     value: 420 },
  ]"
/>

Percent of previous step

<VxFunnelChart :data="ecommerce" percentOf="previous" />

Horizontal orientation

<VxFunnelChart :data="sales" orientation="horizontal" labelPosition="outside" />

Labels outside

<VxFunnelChart :data="data" labelPosition="outside" />

Custom colors

<VxFunnelChart
  :data="[
    { label: 'Applied',     value: 820,  color: '#6366f1' },
    { label: 'Screened',    value: 310,  color: '#8b5cf6' },
    { label: 'Interviewed', value: 120,  color: '#a855f7' },
    { label: 'Offered',     value: 28,   color: '#ec4899' },
    { label: 'Hired',       value: 14,   color: '#f43f5e' },
  ]"
/>

Show dropoff in tooltip

<VxFunnelChart :data="onboarding" showDropoff />

No percents (values only)

<VxFunnelChart :data="data" :showPercents="false" />

Dashboard card

Conversion funnel

3.5% end-to-end · Last 30 days

Props

Prop	Type	Default	Description
data	FunnelStage[]	[]	{ label, value, color? }[]
height	number	320	SVG height
orientation	'vertical' | 'horizontal'	'vertical'	Flow direction
neckWidth	number	0.2	Bottom/end taper (0–1)
gap	number	4	Gap between segments
colors	string[]	[]	Palette override
showValues	boolean	true	Show numeric value
showPercents	boolean	true	Show % label
showDropoff	boolean	false	Include dropoff in tooltip
percentOf	'first' | 'previous'	'first'	What percent baseline
labelPosition	'inside' | 'outside'	'inside'	Label placement
tooltip	boolean	true	Show tooltip
animate	boolean	true	Grow-in on mount

Events

Event	Payload
hover	{ index, stage }
click	{ index, stage }