A stacked bar chart is a graph that is used to compare the parts that make up the whole. Each bar in the chart or graph is divided into other groupings, classifications, or combinations.
Assuming we want to compare the sex ratios of males and females in certain sports, we could have them as follows:
Bar A (Soccer): Boys 75% | Girls 25%
Bar B (Tennis): Boys 50% | 50%
Bar C (Swimming): Boys 45% | Girls 55%
The preceding statistics can be represented in a stacked bar chart. It is important to note that the major difference between a stacked and a regular bar chart is the seriesList property or option. Secondly, there's the addition of a new Boolean option called stacked, which should be set to true.
In an attempt to represent the preceding analytics via a Wijmo widget, we are going to modify our main code's document ready function as follows:
$(document).ready(function () {
$("#wijbarchart").wijbarchart({
stacked: true, //making a stacked bar chart
axis: { //set up the x and y axes text and labels
y: {
text: "Engagement Ratio",
},
x: {
text: "",
labels: {
style: {
rotation: -45
}
}
}
},
hint: { //text to display on hover of chart
content: function () { //returns the label and y position
return this.data.label + '\n ' + this.y + '';
}
},
header: { //title of chart
text: "US Sports Engagement Ratio"
},
seriesList: [{ //seriesList stores label and corresponding data
label: "Soccer",
legendEntry: true,
data: { x: ['Boys', 'Girls'], y: [75, 25] }
},{
label: "Tennis",
legendEntry: true,
data: { x: ['Boys', 'Girls'], y: [50, 50] }
}, {
label: "Swimming",
legendEntry: true,
data: { x: ['Boys', 'Girls'], y: [45, 55] }
}],
seriesStyles: [{ //set fill colors for bar chart
fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8
}, {
fill: "#6aaba7", stroke: "#5f9996", opacity: 0.8
}, {
fill: "#466a85", stroke: "#3e5f77", opacity: 0.8
}],
seriesHoverStyles: [{ "stroke-width": "1.5", opacity: 1
}]
});
});We updated the seriesList property of the wijbarchart object to contain the engagement ratio data for the boys and girls for each of the sports. If you successfully edit the code and run it, you'll have something like this:
We reference the Wijmo dependencies.
After the page loads, we set the
stackedproperty totrue.The
xandyproperties are set, andyis rotated at-45degrees, which rotates the labels for boys and girls.We set the
hintproperty, which is displayed on hovering over the chart.We set the
headerproperty, which is displayed atop the chart.For the
seriesListproperty, we have adatasubproperty that holds data forxandy. These values are mapped one-to-one in such a way thatx['Boys']getsy[0]ory[75].Note that the
stackedoption is set tofalseby default and updating it totruemakes thewijbarchartobject a stacked one.
To illustrate stacked bar charts with a more complex example, we are going to modify our original main code to create a stacked bar chart widget. Let's insert the following code snippet between our script tags:
$(document).ready(function () {
$("#wijbarchart").wijbarchart({
stacked: true, //ensures we have a stacked bar chart
axis: { //set the text and labels for x and y axes
y: {
text: "Total Automobile Sales"
},
x: {
text: "",
labels: {
style: {
rotation: -45
}
}
}
},
hint: { //hint to display on hover of bar chart
content: function () {
return this.data.label + '\n ' + this.y + '';
}
},
header: { //bar chart title
text: "US Toyota Automobile Statistics (Dummy Data)"
},
seriesList: [{ //list of data, legend and label for chart
label: "US",
legendEntry: true,
data: { x: ['Toyota Camry', 'Toyota Corolla', 'Toyota Sienna'], y: [12.35, 21.50, 30.56] }
}],
seriesList: [{
label: "US",
legendEntry: true,
data: { x: ['Toyota Camry', 'Toyota Corolla', 'Toyota Sienna'], y: [12.35, 21.50, 30.56] }
}, {
label: "Japan",
legendEntry: true,
data: { x: ['Toyota Camry', 'Toyota Corolla', 'Toyota Sienna'], y: [4.58, 1.23, 9.67] }
}, {
label: "Other",
legendEntry: true,
data: { x: ['Toyota Camry', 'Toyota Corolla', 'Toyota Sienna'], y: [31.59, 37.14, 65.32] }
}],
seriesStyles: [{ //fill color...
fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8
}, {
fill: "#6aaba7", stroke: "#5f9996", opacity: 0.8
}, {
fill: "#466a85", stroke: "#3e5f77", opacity: 0.8
}],
seriesHoverStyles: [{ "stroke-width": "1.5", opacity: 1
}]
});
});When we run the preceding code after a proper insertion and successful formatting, we see a widget that looks similar to the following screenshot:
The preceding chart is what a stacked bar chart should look like, and this tells us how many Toyota cars were sold in the US, Japan, and other countries. However, as the title depicts, the chart focuses on US sales.
Note
The preceding chart compares the sales in the US, Japan, and other countries. Hence, we see that Toyota Sienna has the highest sales both in the US and overseas.
We can also see that Toyota Corolla has the lowest overall sales in Japan, and Toyota Sienna has its largest sales in other countries—quite a bit more than the sum of Sienna sales in the US and Japan.