Skip to main content

​
FunnelChart

The FunnelChart component displays data as progressively smaller sections in a funnel shape, making it ideal for conversion funnels, sales pipelines, and sequential processes where values decrease at each stage.

​
Props

​
Data Props

​
data
Query | array
required
Query result or array of objects containing the data to visualize
​
nameCol
string
required
Column name containing stage names
​
valueCol
string
required
Column name containing numeric values for each stage

​
Formatting Props

​
valueFmt
string
Format string for values

​
Chart Layout Props

​
title
string
Chart title displayed at the top
​
subtitle
string
Chart subtitle displayed below the title
​
legend
boolean
default:true
Whether to show the legend

​
Funnel Style Props

​
labelPosition
string
default:"inside"
Position of value labels: ‘inside’ | ‘outside’
​
funnelAlign
string
default:"center"
Horizontal alignment of funnel: ‘center’ | ‘left’ | ‘right’
​
funnelSort
string
default:"none"
Sort order for stages: ‘none’ | ‘ascending’ | ‘descending’
​
outlineColor
string
Color for funnel section outlines
​
outlineWidth
number
Width of outlines in pixels
​
showPercent
boolean
default:false
Show percentage of initial value for each stage

​
Color Props

​
colorPalette
string | array
default:"default"
Color palette name or array of colors

​
Advanced Props

​
echartsOptions
object
Custom ECharts configuration object
​
seriesOptions
object
Custom series configuration
​
printEchartsConfig
boolean
default:false
Print ECharts config to console
​
renderer
string
Renderer type: ‘canvas’ | ‘svg’
​
connectGroup
string
Connect charts for synchronized interactions
​
emptySet
string
Empty data behavior: ‘pass’ | ‘warn’ | ‘error’
​
emptyMessage
string
Custom empty data message

​
Examples

​
Basic Funnel Chart

```sql conversion_funnel
select 'Visit' as stage, 10000 as users
union all select 'Sign Up', 5000
union all select 'Active User', 2500
union all select 'Paying Customer', 1000


### Funnel with Percentages

```markdown
<FunnelChart 
  data={conversion_funnel} 
  nameCol="stage"
  valueCol="users"
  showPercent="true"
  title="Conversion Funnel"
  subtitle="Last 30 days"
/>

​
Outside Labels

<FunnelChart 
  data={conversion_funnel} 
  nameCol="stage"
  valueCol="users"
  labelPosition="outside"
  valueFmt="#,##0"
/>

​
Left-Aligned Funnel

<FunnelChart 
  data={conversion_funnel} 
  nameCol="stage"
  valueCol="users"
  funnelAlign="left"
  title="Sales Pipeline"
/>

​
Sorted Funnel

```sql sales_by_region
select region as name, revenue as value
from regional_sales


### Custom Colors and Styling

```markdown
<FunnelChart 
  data={conversion_funnel} 
  nameCol="stage"
  valueCol="users"
  colorPalette={['#4F46E5', '#7C3AED', '#DB2777', '#F59E0B']}
  outlineColor="white"
  outlineWidth=2
  showPercent="true"
  valueFmt="#,##0"
/>

​
With Legend

<FunnelChart 
  data={conversion_funnel} 
  nameCol="stage"
  valueCol="users"
  legend="true"
  title="Marketing Funnel Performance"
  showPercent="true"
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us