PHP Funnel Charts with Custom Neck Height and Width

Download PHP Chart Samples

Customizing the neck in Funnel Chart is really easy. The given example shows Funnel Chart with neck customization. It also includes PHP source code that you can try running locally.

<?php

$dataPoints = array( 
	array("label"=>"Total CV's", "y"=>1398),
	array("label"=>"Prospects", "y"=>895),
	array("label"=>"Aptitude Test", "y"=>200),
	array("label"=>"Interviews", "y"=>50),
	array("label"=>"New Hires", "y"=>11)
)

?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title: {
		text: "Recruitment Process"
	},
	data: [{
		type: "funnel",
		indexLabel: "{label} - {y}",
		yValueFormatString: "#,##0",
		neckHeight: 0,
		dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>

Chart Customizations

The width and height of neck, the lower part of the funnel chart, can be customized using neckWidth and neckHeight respectively. You can also reverse the funnel using reversed property. Other frequently used customization options are legend, valueRepresents etc.