Skip to main content

Funnel Chart

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