PHP Charts & Graphs with Axis / Scale Breaks

Download PHP Chart Samples

CanvasJS supports Axis Scale Breaks that removes large chunks of the axis making readability of graphs much easier. Below example shows Axis Scale Break along with PHP source code that you can try running locally.

<?php

$dataPoints = array(
	array("label"=> "WordPress", "y"=> 60.0),
	array("label"=> "Joomla", "y"=> 6.5),
	array("label"=> "Drupal", "y"=> 4.6),
	array("label"=> "Magento", "y"=> 2.4),
	array("label"=> "Blogger", "y"=> 1.9),
	array("label"=> "Shopify", "y"=> 1.8),
	array("label"=> "Bitrix", "y"=> 1.5),
	array("label"=> "Squarespace", "y"=> 1.5),
	array("label"=> "PrestaShop", "y"=> 1.3),
	array("label"=> "Wix", "y"=> 0.9),
	array("label"=> "OpenCart", "y"=> 0.8)
);
	
?>
<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2",
	title: {
		text: "CMS Market Share - 2017"
	},
	axisY: {
		suffix: "%",
		scaleBreaks: {
			autoCalculate: true
		}
	},
	data: [{
		type: "column",
		yValueFormatString: "#,##0\"%\"",
		indexLabel: "{y}",
		indexLabelPlacement: "inside",
		indexLabelFontColor: "white",
		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

Setting autoCalculate to true allows the chart to apply scale breaks in the required regions automatically. Some other commonly used customization options include collapsibleThreshold, color, type (break type), etc.