Funnel Chart
Visualize progressive reduction through stages. Ideal for sales pipelines, conversion flows, and process analysis.
Usage
import { FunnelChart } from "@chartts/react"
<FunnelChart
data={salesPipeline}
value="count"
label="stage"
/>Props
| Prop | Type | Description |
|---|---|---|
| data | T[] | Array of data objects (ordered by stage) |
| value | keyof T | Key for stage values |
| label | keyof T | Key for stage labels |
| direction | 'vertical' | 'horizontal' | Layout direction. Default: 'vertical' |
| gap | number | Gap between stages in px. Default: 2 |
| pinch | number | How much each stage narrows. 0-1. Default: auto |
Features
- Automatic proportional sizing
- Conversion rate labels
- Vertical and horizontal layouts
- Custom colors per stage
- Animated entry per stage
- Interactive stage selection
Other Charts
Line ChartBar ChartArea ChartPie / Donut ChartScatter ChartBubble ChartRadar ChartCandlestick ChartWaterfall ChartGauge ChartSparklineStacked Bar ChartHorizontal Bar ChartDonut ChartHeatmapBox PlotHistogramTreemapPolar ChartRadial Bar ChartLollipop ChartBullet ChartDumbbell ChartCalendar ChartCombo ChartSankey Diagram