HTML5 & JS Funnel Chart - 1 | JSFiddle Sample Code

HTML5 & JS Funnel Chart - 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>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<input/>
<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-funnel-chart/" target="_blank" title="HTML5 &amp; JS Funnel Chart ">https://canvasjs.com/docs/charts/chart-types/html5-funnel-chart/</a></div>

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
	title:{
		text: "Company Recruitment Process"
	},
	data: [{
		type: "funnel",
		indexLabel: "{label} [{y}%]",
		neckHeight: 0,
		toolTipContent: "{label} - {y}%",
		dataPoints: [
			{ y: 100, label: "Candidates Applied" },
			{ y: 63, label: "Aptitude Test" },
			{ y: 35, label: "Technical Interview" },
			{ y: 15, label: "HR Interview" },
			{ y: 5, label: "Candidates Recruited" }
		]
	}]
});
chart.render();

}