A React Funnel Chart Component with TypeScript support
npm install react-funnel-chart-tsA beautiful and customizable funnel chart component for React applications.
- 📊 Smooth animations and transitions
- 🎨 Fully customizable colors and styles
- 📱 Responsive design
- 🔧 Configurable display options
- 💡 Interactive tooltips
- 📝 TypeScript support
- 🎯 Only 1 dependencies

``bash`
npm install react-funnel-chart-tsor
yarn add react-funnel-chart-ts
`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 (
height={500}
width={800}
showPercentages={true}
showValues={true}
showLabels={true}
showLegend={true}
/>
);
}
`
| 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 |
`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
}
MIT © [Mr.Jack]