HTML5 & JS Funnel Charts

Funnel Chart represents sequentially connected stages in a process. By default, y-value is represented by height of each section. You can also represent y-values by area using valueRepresents property.

indexLabel describes each section of Funnel Chart. By default, it is displayed next to each section. If indexLabels are not provided, labels are used as indexLabels.

Cannot be combined with: Any other Chart type.




Funnel Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries/ dataPoint exploded Boolean false false, true
dataSeries/ dataPoint explodeOnClick Boolean true false, true
dataSeries neckWidth Number/String Automatically Calculated based on Chart Size 90, “30%”…
dataSeries neckHeight Number/String Automatically Calculated based on Chart Size 90, “30%”…
dataSeries valueRepresents String “height” “height”, “area”
dataSeries reversed Boolean false true, false
dataSeries fillOpacity Number 1 .2,.4,1 etc
dataPoint legendText String dataSeries Name “PSP”, “Xbox 360″…


Basic Funnel Chart

Try it Yourself by Editing the Code below.


Funnel Chart With Additional Customization

Try it Yourself by Editing the Code below.





If you have any questions, please feel free to ask in our forums.Ask Question