Funnel Chart

Visualize conversion funnels and pipelines with Chart.ts. Automatic width proportional to values, stage labels with percentages, drop-off rate indicators, and SVG rendering. Works with any JavaScript framework.

$npm install @chartts/core
example.tsx
import { funnel } from "@chartts/core"

const svg = funnel({
  data: [
    { stage: "Visitors", count: 10000 },
    { stage: "Leads", count: 4200 },
    { stage: "Qualified", count: 1800 },
    { stage: "Proposals", count: 720 },
    { stage: "Closed", count: 340 },
  ],
  label: "stage",
  value: "count",
  showPercentages: true,
})

Features

Width proportional to values
Stage labels with conversion percentages
Drop-off rate between stages
Horizontal and vertical orientations
Gradient fills
SVG rendering with Tailwind CSS
Under 3kb tree-shaken
Read the DocsSee DemosExamples