React Funnel Chart Pro

A beautiful and customizable funnel chart component for React applications.

Screen shot

Features

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

Installation

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

Usage

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

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}
    />
  );
}

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, percentage: number) => string | undefined | Custom tooltip content | | animationDuration | number | 300 | Animation duration in milliseconds | | colors | object | { labelText: '#374151', labelBackground: 'white', stroke: 'white' } | Custom colors | | className | string | '' | Additional CSS classes | | style | object | {} | Additional inline styles |

Data Structure

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
}

License

MIT © [Mr.Jack]