React Funnel Chart
Visualize conversion funnels with a React funnel chart. Automatic width calculation, stage labels with percentages, drop-off rates, and Tailwind CSS styling.
$
npm install @chartts/reactexample.tsx
import { FunnelChart } from "@chartts/react"
export function ConversionFunnel() {
const data = [
{ stage: "Visitors", count: 12000 },
{ stage: "Sign Ups", count: 4800 },
{ stage: "Activated", count: 2100 },
{ stage: "Subscribed", count: 890 },
{ stage: "Retained", count: 620 },
]
return (
<FunnelChart
data={data}
label="stage"
value="count"
className="h-72"
showPercentages
/>
)
}Features
Automatic width proportional to values
Stage labels with conversion percentages
Drop-off rate indicators
Horizontal and vertical orientations
SVG rendering with gradient fills
Tailwind className on stages and labels
Under 3kb tree-shaken