HTML5 & JS Stacked Column 100 Charts - 1 | JSFiddle Sample Code

HTML5 & JS Stacked Column 100 Charts - 1 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/chart-types/html5-stacked-column-100-chart/" target="_blank" title="HTML5 &amp; JS Stacked Column 100 Charts ">https://canvasjs.com/docs/charts/chart-types/html5-stacked-column-100-chart/</a></div>

JavaScript

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		title:{
			text: "Number of Students in Each Room"
		},
		axisX:{
			title: "Rooms"
		},
		axisY:{
			title: "percentage"
		},
		data: [
		{
			type: "stackedColumn100",
			legendText: "Boys",
			showInLegend: "true",
			indexLabel: "#percent %",
			indexLabelPlacement: "inside",
			indexLabelFontColor: "white",
			dataPoints: [
				{  y: 0, label: "Cafeteria"},
				{  y: 10, label: "Lounge" },
				{  y: 72, label: "Games Room" },
				{  y: 30, label: "Lecture Hall" },
				{  y: 21, label: "Library"}
			]
		},
		{
			type: "stackedColumn100",
			legendText: "Girls",
			showInLegend: "true",
			indexLabel: "#percent %",
			indexLabelPlacement: "inside",
			indexLabelFontColor: "white",
			dataPoints: [
				{  y: 0, label: "Cafeteria"},
				{  y: 14, label: "Lounge" },
				{  y: 40, label: "Games Room" },
				{  y: 43, label: "Lecture Hall" },
				{  y: 17, label: "Library"}
			]
		}
		]
	});
	chart.render();
	}