React Funnel Chart Pro

A beautiful and customizable funnel chart library for React applications, featuring both basic and advanced visualization options for sales funnels, conversion funnels, and other funnel-based analytics.

Features

Basic Funnel Chart

• 📊 Smooth animations and transitions
• 🎨 Fully customizable colors and styles
• 📱 Responsive design
• 🔧 Configurable display options
• 💡 Interactive tooltips
• 📝 TypeScript support
• 🎯 Zero dependencies

Advanced Funnel Chart

• 📈 Conversion rate analysis
• 💰 Revenue and cost tracking
• ⏱️ Time-in-stage metrics
• 📉 Drop-off analysis
• 🔄 Velocity tracking
• 🖱️ Interactive stage selection
• 📊 Detailed metrics panel

Installation

npm install react-funnel-chart-pro
# or
yarn add react-funnel-chart-pro

Basic Usage

import { FunnelChart } from 'react-funnel-chart-pro';

const data = [
  { label: 'Visitors', value: 5000, color: '#60A5FA' },
  { label: 'Interested', value: 2500, color: '#34D399' },
  { label: 'Prospects', value: 1200, color: '#A78BFA' },
  { label: 'Negotiations', value: 600, color: '#F472B6' },
  { label: 'Deals', value: 200, color: '#FBBF24' },
];

function App() {
  return (
    <FunnelChart
      data={data}
      height={500}
      width={800}
      showPercentages={true}
      showValues={true}
      showLabels={true}
      showLegend={true}
    />
  );
}

Advanced Usage

import { AdvancedFunnelChart } from 'react-funnel-chart-pro';

const advancedData = [
  {
    label: 'Website Visits',
    value: 10000,
    color: '#3B82F6',
    subLabel: 'Total unique visitors',
    timeInStage: 1,
    revenue: 0,
    cost: 1000
  },
  {
    label: 'Sign Ups',
    value: 7500,
    color: '#10B981',
    subLabel: 'Created an account',
    timeInStage: 2,
    revenue: 25000,
    cost: 2000
  },
  // ... more stages
];

function App() {
  return (
    <AdvancedFunnelChart
      data={advancedData}
      showMetrics={true}
      showRevenue={true}
      showVelocity={true}
      onStageClick={(stage) => console.log('Stage clicked:', stage)}
    />
  );
}

API Reference

FunnelChart Props

Prop	Type	Default	Description
data	FunnelData[]	required	Array of data points for the funnel chart
height	number	400	Height of the chart in pixels
width	number	600	Width of the chart in pixels
showPercentages	boolean	true	Show percentage values
showValues	boolean	true	Show raw values
showLabels	boolean	true	Show labels
showLegend	boolean	true	Show legend
showTooltips	boolean	true	Show tooltips on hover
formatValue	(value: number) => string	value.toLocaleString()	Custom value formatter
formatPercentage	(percentage: number) => string	`${percentage.toFixed(1)}%`	Custom percentage formatter
customTooltip	(item: FunnelData) => string	undefined	Custom tooltip content
animationDuration	number	300	Animation duration in milliseconds
className	string	''	Additional CSS classes
style	object	{}	Additional inline styles

AdvancedFunnelChart Props

Prop	Type	Default	Description
data	AdvancedFunnelData[]	required	Array of advanced data points
height	number	600	Height of the chart
width	number	1000	Width of the chart
showMetrics	boolean	true	Show conversion metrics
showRevenue	boolean	true	Show revenue data
showVelocity	boolean	true	Show velocity metrics
onStageClick	(stage: AdvancedFunnelData) => void	undefined	Stage click handler
className	string	''	Additional CSS classes
style	object	{}	Additional inline styles

Data Types

interface FunnelData {
  label: string;      // Label for the funnel level
  value: number;      // Numeric value
  color: string;      // Color for the funnel level
  subLabel?: string;  // Optional additional information
}

interface AdvancedFunnelData extends FunnelData {
  timeInStage?: number;  // Average time in days
  revenue?: number;      // Revenue at this stage
  cost?: number;         // Cost at this stage
}

Features in Detail

Basic Funnel Chart

• Percentage calculations between stages
• Customizable colors and styles
• Interactive tooltips
• Responsive design
• Value and label formatting
• Legend support

Advanced Funnel Chart

• Conversion rate analysis between stages
• Revenue and cost tracking per stage
• Time-in-stage metrics
• Drop-off analysis
• Velocity tracking
• Interactive stage selection
• Detailed metrics panel
• Custom formatting for numbers and currencies

License

MIT © [sabiraie]