jQuery Stacked Bar 100% Chart is similar to Stacked Bar except that their height is rendered as a percentage of total value at any given point. Given example shows simple jQuery Stacked Bar 100% Chart along with HTML5 source code that you can edit in-browser or save to run it locally.
window.onload = function () { //Better to construct options first and then pass it as a parameter var options = { animationEnabled: true, theme: "light2", //"light1", "dark1", "dark2" title:{ text: "Division of Products Sold in 2nd Quarter" }, axisY:{ interval: 10, suffix: "%" }, toolTip:{ shared: true }, data:[{ type: "stackedBar100", toolTipContent: "{label}<br><b>{name}:</b> {y} (#percent%)", showInLegend: true, name: "April", dataPoints: [ { y: 550, label: "Water Filter" }, { y: 450, label: "Modern Chair" }, { y: 70, label: "VOIP Phone" }, { y: 200, label: "Microwave" }, { y: 70, label: "Water Filter" }, { y: 324, label: "Expresso Machine" }, { y: 300, label: "Lobby Chair" } ] }, { type: "stackedBar100", toolTipContent: "<b>{name}:</b> {y} (#percent%)", showInLegend: true, name: "May", dataPoints: [ { y: 450, label: "Water Filter" }, { y: 550, label: "Modern Chair" }, { y: 270, label: "VOIP Phone" }, { y: 400, label: "Microwave" }, { y: 270, label: "Water Filter" }, { y: 524, label: "Expresso Machine" }, { y: 500, label: "Lobby Chair" } ] }, { type: "stackedBar100", toolTipContent: "<b>{name}:</b> {y} (#percent%)", showInLegend: true, name: "June", dataPoints: [ { y: 350, label: "Water Filter" }, { y: 660, label: "Modern Chair" }, { y: 265, label: "VOIP Phone" }, { y: 271, label: "Microwave" }, { y: 125, label: "Water Filter" }, { y: 360, label: "Expresso Machine" }, { y: 340, label: "Lobby Chair" } ] }] }; $("#chartContainer").CanvasJSChart(options); }
You can use showInLegend property to enable legends for the data series. Other related customization options are dataPointWidth, shared (toolTip), etc.