jQuery Pyramid Charts are used to show data that are hierarchical in nature, indicating a progressive order. It is also used to show proportion of the total. Given example shows simple jQuery Pyramid Chart along with HTML source code that you can edit in-browser or save to run it locally.
window.onload = function () { var options = { animationEnabled: true, exportEnabled: true, title: { text: "Product Manufacturing Expenses" }, data: [{ type: "pyramid", indexLabelFontSize: 18, showInLegend: true, legendText: "{indexLabel}", toolTipContent: "<b>{indexLabel}:</b> {y}%", dataPoints: [ { y: 30, indexLabel: "Research and Design" }, { y: 30, indexLabel: "Manufacturing" }, { y: 15, indexLabel: "Marketing" }, { y: 13, indexLabel: "Shipping" }, { y: 12, indexLabel: "Retail" } ] }] }; $("#chartContainer").CanvasJSChart(options); }
valueRepresents allow you to control whether the values of dataPoints are proportional to section’s area or height. Other commonly used customization options are indexLabelPlacement, indexLabelFontColor, showInLegend etc.