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]