React-funnel-chart-ts NPM

React Funnel Chart Pro

A beautiful and customizable funnel chart component for React applications.

Screen shot

Funnel Chart sample

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
}