vue-charts 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 fade in and out with their trapezoids.
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
<FunnelChart> takes the common chart container props. It has
no axes and no bar sizing.
Funnel props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | row path or accessor | required | Field with the value |
name-key | row path or accessor | 'name' | Field with the segment name |
data | Array | the chart's data | Rows for this series |
last-shape-type | 'triangle' | 'rectangle' | 'triangle' | Shape of the last segment |
reversed | boolean | false | Put the widest segment at the bottom |
width | number | string | the plot width | Funnel width |
fill | string | series palette per segment | Segment fill; <Cell> sets one segment |
stroke | string | 'var(--v-charts-background, #fff)' | Segment outline |
name | string | number | — | Series name in the tooltip; the legend lists segment names |
legend-type | LegendType | 'rect' | Legend icon |
tooltip-type | 'none' | — | Set 'none' to leave the series out of the tooltip |
hide | boolean | false | Hide the series |
class | string | — | Class on the series layer |
is-animation-active | boolean | the chart's value | Animate this series |
transition | ChartTransition | the chart's value | Timing and easing of data changes |
Events: @click, @mouseenter, @mouseleave with (trapezoid, index, event), and @animation-start, @animation-end.
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 |