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

``bash
npm install react-funnel-chart-ts


or


yarn add react-funnel-chart-ts
`

Usage

`jsx
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 (
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

`typescript
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]