Charts

FunnelChartNew in 0.7.0

A conversion funnel: stages stack top to bottom and narrow with their value, with step-over-step and total-conversion percentages.

FunnelChart

Preview

Single-hue colorsCustom labels

Gap 2px

Click a stage.

Usage

tsx

import { FunnelChart } from "@vesture/react";

<FunnelChart
  width={480}
  height={320}
  shape="stepped"
  metric="total"
  stages={[
    { key: "visit", label: "Visits", value: 12400 },
    { key: "signup", label: "Sign-ups", value: 5200 },
    { key: "paid", label: "Paid", value: 640 },
  ]}
  formatValue={(v) => v.toLocaleString()}
/>

Behavior

Each stage's width is its value relative to the first stage. shape="tapered" slopes every stage into the next; "stepped" draws flat-sided bars with gaps for a more tabular look.
metric chooses the secondary figure: percent of the previous stage, percent of the first stage, or none.
Stages with negative values are ignored; a funnel whose first stage is zero renders the empty state.
renderLabel receives each segment's geometry and conversion numbers for fully custom labels; onStageClick makes stages interactive.

Props

Prop	Type	Default	Description
stages	{ key: string; label: string; value: number; color?: string }[]	—	Required. Ordered top to bottom.
width / height	number	—	Required.
shape	"tapered" \| "stepped"	"tapered"
gap	number	2	Vertical gap between stages.
colors	string[]	—	Cycled by index; default is the chart series palette.
metric	"previous" \| "total" \| "none"	"previous"	Secondary figure under each label.
formatValue	(value: number) => string	String
renderLabel	(segment, geometry) => ReactNode	—	Custom SVG label per stage.
onStageClick	(stage, index) => void	—