Charts
Funnel Chart
Build funnel charts for conversion and drop-off visualization
Funnel charts display data as stacked trapezoids that narrow progressively, ideal for conversion funnels.
Simple Funnel Chart
A basic funnel chart with colored segments using <Cell>.
Funnel Chart with Labels
Place <LabelList> as a child inside <Funnel>. Labels appear after the entrance animation completes.
Rectangle Last Shape
Set lastShapeType="rectangle" so the last segment keeps its width instead of narrowing to a point.
Reversed Funnel
Set :reversed="true" to flip the funnel — narrowest at the top, widest at the bottom.
Funnel Chart with Legend
Add <Legend> alongside <Funnel> to show a legend keyed by data names.
FunnelChart props
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | — | Chart width |
height | number | — | Chart height |
Funnel props
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | number | Function | required | Key from data for values |
data | Array | — | Funnel data array |
nameKey | string | 'name' | Key for segment names |
lastShapeType | 'triangle' | 'rectangle' | 'triangle' | Shape of last segment |
reversed | boolean | false | Flip funnel orientation |
fill | string | '#808080' | Default fill color |
stroke | string | '#fff' | Stroke color |
width | number | string | — | Custom funnel width |
hide | boolean | false | Hide the funnel |
isAnimationActive | boolean | true | Enable entrance animation |
transition | AnimationOptions | { duration: 0.8, ease: 'easeOut' } | Animation timing config (motion-v) |
onAnimationStart | () => void | — | Callback when animation starts |
onAnimationEnd | () => void | — | Callback when animation ends |
legendType | string | 'rect' | Legend icon type |
tooltipType | string | — | Tooltip type |
className | string | — | Additional CSS class |
Slots
| Slot | Props | Description |
|---|---|---|
#shape | FunnelTrapezoidItem & { animationProgress } | Custom trapezoid rendering. animationProgress goes from 0 to 1; use v-if="props.animationProgress >= 1" to show labels only after animation. |
default | — | <Cell> for per-segment colors, <LabelList> for labels |