2

Funnel Chart

PreviousNext

Flowing stream-style funnel chart with smooth bezier curves, stage markers, and value pills.

"use client"

import { FunnelChart } from "@/components/ui/charts"

// Sample data showing user flow through stages (expanding funnel)
const stages = ["Stage 1", "Stage 2", "Stage 3", "Stage 4"]

const series = [
  { name: "Channel A", values: [12000, 24000, 45000, 68000], color: "#1e40af" },
  { name: "Channel B", values: [9500, 19000, 36000, 54000], color: "#2563eb" },
  { name: "Channel C", values: [7500, 15000, 28000, 42000], color: "#3b82f6" },
  { name: "Channel D", values: [6000, 12000, 22000, 33000], color: "#60a5fa" },
  { name: "Channel E", values: [4500, 9000, 17000, 26000], color: "#93c5fd" },
  { name: "Channel F", values: [3500, 7000, 13000, 20000], color: "#bfdbfe" },
]

export function FunnelChartDemo() {
  return (
    <FunnelChart
      stages={stages}
      series={series}
      colorScheme="custom"
      showStageMarkers
      showValuePills
      pillPosition="both"
      animate
    />
  )
}

About

The Funnel Chart displays multiple data series flowing through stages, with organic stream-like shapes that expand and contract based on values. Perfect for visualizing multi-channel conversion funnels, user flows, and pipeline analysis.

Features:

  • Flowing streams - Organic bezier curves create smooth river-like flows
  • Multiple series - Stack multiple data series with color gradients
  • Stage markers - White vertical lines mark each stage
  • Value pills - Show values in styled pill badges
  • Color schemes - Built-in orange, blue, purple, green, and pink themes
  • Animated entrance - Smooth animation on mount
  • Interactive tooltips - Hover to see series details

Installation

pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/funnel-chart.json

Usage

import { FunnelChart } from "@/components/ui/charts"
 
const stages = ["Stage 1", "Stage 2", "Stage 3", "Stage 4"]
 
const series = [
  { name: "Channel A", values: [8500, 15200, 28400, 42000] },
  { name: "Channel B", values: [6200, 12800, 22100, 35500] },
  { name: "Channel C", values: [4800, 9600, 18500, 28200] },
  { name: "Channel D", values: [3200, 7200, 14200, 22800] },
]
 
export function Example() {
  return (
    <FunnelChart
      stages={stages}
      series={series}
      colorScheme="orange"
      showStageMarkers
      showValuePills
      animate
    />
  )
}

Color Schemes

Blue Theme

"use client"

import { FunnelChart } from "@/components/ui/charts"

// Conversion funnel data
const stages = ["Awareness", "Interest", "Desire", "Action"]

const series = [
  { name: "Organic", values: [12000, 8500, 4200, 1800], color: "#1e40af" },
  { name: "Paid", values: [9500, 6800, 3500, 1500], color: "#2563eb" },
  { name: "Social", values: [7200, 5200, 2800, 1200], color: "#3b82f6" },
  { name: "Direct", values: [5400, 4000, 2100, 900], color: "#60a5fa" },
  { name: "Referral", values: [3800, 2800, 1500, 650], color: "#93c5fd" },
]

export function FunnelChartGradientDemo() {
  return (
    <div className="w-full max-w-4xl">
      <FunnelChart
        stages={stages}
        series={series}
        colorScheme="custom"
        showStageMarkers
        showValuePills
        pillPosition="center"
        animate
      />
    </div>
  )
}

Purple Theme

"use client"

import { FunnelChart } from "@/components/ui/charts"

// Email campaign funnel
const stages = ["Sent", "Delivered", "Opened", "Clicked"]

const series = [
  { name: "Campaign A", values: [25000, 24200, 8500, 2100], color: "#1e40af" },
  { name: "Campaign B", values: [18000, 17400, 6200, 1600], color: "#2563eb" },
  { name: "Campaign C", values: [12000, 11600, 4100, 1100], color: "#3b82f6" },
  { name: "Campaign D", values: [8000, 7700, 2800, 750], color: "#60a5fa" },
]

export function FunnelChartFlatDemo() {
  return (
    <div className="w-full max-w-4xl">
      <FunnelChart
        stages={stages}
        series={series}
        colorScheme="custom"
        showStageMarkers
        showValuePills
        pillPosition="center"
        animate
      />
    </div>
  )
}

Green Theme

"use client"

import { FunnelChart } from "@/components/ui/charts"

// User engagement funnel
const stages = ["Visit", "Register", "Active", "Premium"]

const series = [
  { name: "Segment 1", values: [45000, 18000, 8500, 2200], color: "#1e40af" },
  { name: "Segment 2", values: [32000, 14500, 7200, 1900], color: "#2563eb" },
  { name: "Segment 3", values: [24000, 11000, 5800, 1500], color: "#3b82f6" },
  { name: "Segment 4", values: [18000, 8500, 4500, 1200], color: "#60a5fa" },
  { name: "Segment 5", values: [12000, 6000, 3200, 850], color: "#93c5fd" },
]

export function FunnelChartPyramidDemo() {
  return (
    <div className="w-full max-w-4xl">
      <FunnelChart
        stages={stages}
        series={series}
        colorScheme="custom"
        showStageMarkers
        showValuePills
        pillPosition="both"
        animate
      />
    </div>
  )
}

Pink Theme

"use client"

import { FunnelChart } from "@/components/ui/charts"

// Sales pipeline data
const stages = ["Lead", "Qualified", "Proposal", "Closed"]

const series = [
  {
    name: "Enterprise",
    values: [15000, 28000, 42000, 58000],
    color: "#1e40af",
  },
  {
    name: "Mid-Market",
    values: [12000, 22000, 35000, 48000],
    color: "#2563eb",
  },
  { name: "SMB", values: [8500, 16000, 26000, 38000], color: "#3b82f6" },
  { name: "Startup", values: [5500, 11000, 18000, 28000], color: "#60a5fa" },
]

export function FunnelChartHorizontalDemo() {
  return (
    <div className="w-full max-w-4xl">
      <FunnelChart
        stages={stages}
        series={series}
        colorScheme="custom"
        showStageMarkers
        showValuePills
        pillPosition="both"
        animate
        height={300}
      />
    </div>
  )
}

API Reference

PropTypeDefaultDescription
stagesstring[]requiredArray of stage labels
seriesFunnelSeries[]requiredArray of data series
colorScheme"orange" | "blue" | "purple" | "green" | "pink" | "custom""orange"Color scheme
showStageMarkersbooleantrueShow vertical stage marker lines
showValuePillsbooleantrueShow value badges at stages
pillPosition"top" | "bottom" | "both" | "center""both"Position of value pills
animatebooleantrueAnimate on mount
animationDurationnumber1000Animation duration in ms
minFlowHeightnumber8Minimum height for flow streams
valueFormatterfunction-Custom value formatter
onSeriesClickfunction-Click handler for series

Data Format

interface FunnelSeries {
  name: string // Series name (shown in tooltip)
  values: number[] // Value at each stage (must match stages length)
  color?: string // Optional custom color (for "custom" colorScheme)
}

Customization

Custom Colors

const series = [
  { name: "Series A", values: [100, 200, 300], color: "#FF6B6B" },
  { name: "Series B", values: [80, 160, 240], color: "#4ECDC4" },
  { name: "Series C", values: [60, 120, 180], color: "#45B7D1" },
]
 
<FunnelChart
  stages={["Start", "Middle", "End"]}
  series={series}
  colorScheme="custom"
/>

Center Pills Only

<FunnelChart stages={stages} series={series} pillPosition="center" />

Custom Value Formatter

<FunnelChart
  stages={stages}
  series={series}
  valueFormatter={(value) => `$${(value / 1000).toFixed(1)}K`}
/>

Click Handling

<FunnelChart
  stages={stages}
  series={series}
  onSeriesClick={(series, stageIndex) => {
    console.log(`Clicked ${series.name} at stage ${stageIndex}`)
  }}
/>

Without Stage Markers

<FunnelChart stages={stages} series={series} showStageMarkers={false} />

Notes

  • The funnel chart uses SVG bezier curves to create smooth, flowing streams between stages
  • Each series is stacked on top of previous series, with values accumulating
  • Value pills can be positioned at top, bottom, both, or center of each stage
  • The component automatically calculates the optimal curve shapes based on value changes
  • Animation duration can be customized or disabled for instant rendering
  • Custom color schemes allow full control over visual branding
  • Interactive tooltips show series name and value on hover
  • Click handlers provide access to both series data and stage index for custom interactions