Home Components Funnel Chart

Funnel Chart

Loading... 
<FunnelChart 
    data={funnel_data} 
    nameCol=stage
    valueCol=customers
/>

Examples

Ascending

Loading... 
<FunnelChart 
    data={funnel_data} 
    nameCol=stage
    valueCol=customers
    funnelSort=ascending
/>

Alignment

Loading... 
<FunnelChart 
    data={funnel_data} 
    nameCol=stage
    valueCol=customers
    funnelAlign=left
/>

Show Percent Label

Loading... 
<FunnelChart 
    data={funnel_data} 
    nameCol=stage
    valueCol=customers
    showPercent=true
/>

Options

Data

data
Required
Query name, wrapped in curly braces
Options:
query name
nameCol
Required
Column to use for the name of the chart
Options:
column name
valueCol
Required
Column to use for the value of the chart
Options:
column name
emptySet
Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in `build:strict`. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed.
Options:
Default:
error
emptyMessage
Text to display when an empty dataset is received - only applies when `emptySet` is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.).
Options:
string
Default:
No records

Formatting & Styling

valueFmt
Format to use for `valueCol` (<a class=markdown href='/core-concepts/formatting'>see available formats<a/>)
Options:
Excel-style format | built-in format | custom format
outlineColor
Border color. Only accepts a single color.
Options:
CSS name | hexademical | RGB | HSL
Default:
transparent
outlineWidth
Border Width. It should be a natural number.
Options:
number
Default:
1
labelPosition
Position of funnel item's label.
Options:
Default:
inside
showPercent
Show percentage in data labels
Options:
Default:
false
funnelSort
Data sorting of the chart.
Options:
Default:
none
funnelAlign
Alignment of funnel.
Options:
Default:
center
colorPalette
Array of custom colours to use for the chart. E.g., <code class=markdown>{['#cf0d06','#eb5752','#e88a87']}</code>
Options:
array of color strings (CSS name | hexademical | RGB | HSL)
Default:
built-in color palette

Chart

title
Chart title. Appears at top left of chart.
Options:
string
subtitle
Chart subtitle. Appears just under title.
Options:
string
legend
Turns legend on or off. Legend appears at top center of chart.
Options:
Default:
true
renderer
Which chart renderer type (canvas or SVG) to use. See ECharts' <a href='https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/' class=markdown>documentation on renderers</a>.
Options:
Default:
canvas

Custom Echarts Options

echartsOptions
Custom Echarts options to override the default options. See <a href='/components/echarts-options/' class=markdown>reference page</a> for available options.
Options:
{{exampleOption:'exampleValue'}}
seriesOptions
Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using `echartsOptions` See <a href='/components/echarts-options/' class=markdown>reference page</a> for available options.
Options:
{{exampleSeriesOption:'exampleValue'}}
printEchartsConfig
Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options
Options:
Default:
false

Interactivity

connectGroup
Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same `connectGroup` name will become connected