Skip to main content

Funnel Chart

<FunnelChart 
data={query_name}
nameCol=column_name
valueCol=column_value
/>

Examples

Ascending

<FunnelChart 
data={query_name}
nameCol=column_name
valueCol=column_value
funnelSort=ascending
/>

Alignment

<FunnelChart 
data={query_name}
nameCol=column_name
valueCol=column_value
funnelAlign=left
/>

Show Percent Label

funnel-show-percent
<FunnelChart 
data={query_name}
nameCol=column_name
valueCol=column_value
showPercent=true
/>

Options

Data

Name Description Required? Options Default
data Query name, wrapped in curly braces Yes query name -
nameCol Column to use for the name of the chart Yes column name -
valueCol Column to use for the value of the chart Yes 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. - error | warn | pass 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.). - string No records

Formatting & Styling

Name Description Required? Options Default
valueFmt Format to use for `valueCol` (see available formats) - Excel-style format | built-in format | custom format -
outlineColor Border color. Only accepts a single color. - CSS name | hexademical | RGB | HSL transparent
outlineWidth Border Width. It should be a natural number. - number 1
labelPosition Position of funnel item's label. - left | right | inside inside
showPercent Show percentage in data labels - true | false false
funnelSort Data sorting of the chart. - none | ascending | descending none
funnelAlign Alignment of funnel. - left | right | center center
colorPalette Array of custom colours to use for the chart
E.g., ['#cf0d06','#eb5752','#e88a87']
Note that the array must be surrounded by curly braces.
- array of color strings (CSS name | hexademical | RGB | HSL) built-in color palette

Chart

Name Description Required? Options Default
title Chart title. Appears at top left of chart. - string -
subtitle Chart subtitle. Appears just under title. - string -
legend Turns legend on or off. Legend appears at top center of chart. - true | false true
renderer Which chart renderer type (canvas or SVG) to use. See ECharts' documentation on renderers: https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/ - canvas | svg canvas

Custom Echarts Options

Name Description Required? Options Default
echartsOptions Custom Echarts options to override the default options. See reference page for available 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 reference page for available 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 - true | false false