Stacked Column 100% Charts, also referred to as Vertical Stacked Bar 100% Charts are similar to Stacked Column Charts except that their individual height is calculated as a percentage of the total sum. This allows you to compare individual contribution of data series to the total sum in percent. Charts are interactive, responsive, support animation & exporting as image. Given example shows simple Stacked Column 100% Chart along with source code that you can edit in-browser or save to run it locally.
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Composition of Internet Traffic in North America"
},
axisX: {
interval: 1,
intervalType: "year",
valueFormatString: "YYYY"
},
axisY: {
suffix: "%"
},
toolTip: {
shared: true
},
legend: {
reversed: true,
verticalAlign: "center",
horizontalAlign: "right"
},
data: [{
type: "stackedColumn100",
name: "Real-Time",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 40 },
{ x: new Date(2011,0), y: 50 },
{ x: new Date(2012,0), y: 60 },
{ x: new Date(2013,0), y: 61 },
{ x: new Date(2014,0), y: 63 },
{ x: new Date(2015,0), y: 65 },
{ x: new Date(2016,0), y: 67 }
]
},
{
type: "stackedColumn100",
name: "Web Browsing",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 28 },
{ x: new Date(2011,0), y: 18 },
{ x: new Date(2012,0), y: 12 },
{ x: new Date(2013,0), y: 10 },
{ x: new Date(2014,0), y: 10 },
{ x: new Date(2015,0), y: 7 },
{ x: new Date(2016,0), y: 5 }
]
},
{
type: "stackedColumn100",
name: "File Sharing",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 15 },
{ x: new Date(2011,0), y: 12 },
{ x: new Date(2012,0), y: 10 },
{ x: new Date(2013,0), y: 9 },
{ x: new Date(2014,0), y: 7 },
{ x: new Date(2015,0), y: 5 },
{ x: new Date(2016,0), y: 1 }
]
},
{
type: "stackedColumn100",
name: "Others",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 17 },
{ x: new Date(2011,0), y: 20 },
{ x: new Date(2012,0), y: 18 },
{ x: new Date(2013,0), y: 20 },
{ x: new Date(2014,0), y: 20 },
{ x: new Date(2015,0), y: 23 },
{ x: new Date(2016,0), y: 27 }
]
}]
});
chart.render();
}
You can enable legends using showInLegend property. The placement of the legends can also be customized using verticalAlign and horizontalAlign properties. Further customizations include color, shared (toolTip), etc.