Funnel Chart
A funnel chart component built using Recharts v3. Visualize stage-based conversion data with customizable colors, gradients, and glow effects.
Installation
$ npx shadcn@latest add @orecus/funnel-chartRegistry:
@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card
Component
Conversion Funnel
E-commerce conversion stages
Sales Pipeline
B2B sales stages
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | { name: string; value: number }[] | — | The data for the chart - each item becomes a funnel segment |
colors | ThemeColor[] | — | Colors for each segment |
colorStyle | 'default' | 'gradient' | 'gradient' | Color fill style |
glow | boolean | true | Add glow effect behind segments |
showLabels | boolean | true | Show segment labels |
labelPosition | 'inside' | 'right' | 'left' | 'right' | Label placement |
reversed | boolean | false | Reverse funnel direction (wide at bottom) |
showLegend | boolean | true | Show chart legend |
cardProps | CardProps | — | Props to pass to the underlying Card component |
tooltipSortByValue | boolean | false | Sort tooltip items by value (descending) |
legendIndicator | 'square' | 'circle' | 'line' | 'square' | Shape of legend indicators |
legendShowValues | boolean | false | Show values in legend |
legendWrap | boolean | true | Allow legend items to wrap |