Stacked Bar Chart is formed by stacking multiple data-series, one on top of the other and is useful to compare contribution of two or more series with the total. Given example shows simple Stacked Bar Chart along with HTML / jQuery source code that you can edit in-browser or save to run it locally.
Read More >>
window.onload = function () { //Better to construct options first and then pass it as a parameter var options = { animationEnabled: true, theme: "light2", title:{ text: "Cost Of Pancake Ingredients" }, axisY2:{ prefix: "$", lineThickness: 0 }, toolTip: { shared: true }, legend:{ verticalAlign: "top", horizontalAlign: "center" }, data: [ { type: "stackedBar", showInLegend: true, name: "Butter (500gms)", axisYType: "secondary", color: "#7E8F74", dataPoints: [ { y: 3, label: "India" }, { y: 5, label: "US" }, { y: 3, label: "Germany" }, { y: 6, label: "Brazil" }, { y: 7, label: "China" }, { y: 5, label: "Australia" }, { y: 5, label: "France" }, { y: 7, label: "Italy" }, { y: 9, label: "Singapore" }, { y: 8, label: "Switzerland" }, { y: 12, label: "Japan" } ] }, { type: "stackedBar", showInLegend: true, name: "Flour (1kg)", axisYType: "secondary", color: "#F0D6A7", dataPoints: [ { y: .5, label: "India" }, { y: 1.5, label: "US" }, { y: 1, label: "Germany" }, { y: 2, label: "Brazil" }, { y: 2, label: "China" }, { y: 2.5, label: "Australia" }, { y: 1.5, label: "France" }, { y: 1, label: "Italy" }, { y: 2, label: "Singapore" }, { y: 2, label: "Switzerland" }, { y: 3, label: "Japan" } ] }, { type: "stackedBar", showInLegend: true, name: "Milk (2l)", axisYType: "secondary", color: "#EBB88A", dataPoints: [ { y: 2, label: "India" }, { y: 3, label: "US" }, { y: 3, label: "Germany" }, { y: 3, label: "Brazil" }, { y: 4, label: "China" }, { y: 3, label: "Australia" }, { y: 4.5, label: "France" }, { y: 4.5, label: "Italy" }, { y: 6, label: "Singapore" }, { y: 3, label: "Switzerland" }, { y: 6, label: "Japan" } ] }, { type: "stackedBar", showInLegend: true, name: "Eggs (20)", axisYType: "secondary", color:"#DB9079", indexLabel: "$#total", dataPoints: [ { y: 2, label: "India" }, { y: 3, label: "US" }, { y: 6, label: "Germany"}, { y: 4, label: "Brazil" }, { y: 4, label: "China" }, { y: 8, label: "Australia" }, { y: 8, label: "France" }, { y: 8, label: "Italy" }, { y: 4, label: "Singapore" }, { y: 11, label: "Switzerland" }, { y: 6, label: "Japan" } ] } ] }; $("#chartContainer").CanvasJSChart(options); }
You can use dataPointWidth to control the width of bar. Some other frequently used customization options are shared(in toolTip), showInLegend, color, etc.