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.
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.