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/react
example.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