HTML5 & JS Pyramid Charts

A Pyramid Chart is a triangular Chart divided into sections where width indicates a level of hierarchy among the categories. By default, y-value is represented by height of each section. You can also represent y-values by area using valueRepresents property.

indexLabels describes each section of Pyramid 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.




Pyramid 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 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 Pyramid Chart

Try it Yourself by Editing the Code below.


Pyramid Chart With Additional Customization

Try it Yourself by Editing the Code below.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.