Skip to main content

<FunnelChart/>

funnel

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

Examples

Ascending

ascending-funnel

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

Alignment

left-aligned-funnel

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

Props

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 -

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
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
funnelSort Data sorting of the chart. - none | ascending | descending none
funnelAlign Alignment of funnel. - left | right | center center