PHP Waterfall Charts with Custom Colors

Download PHP Chart Samples

Waterfall Charts are useful for understanding the cumulative effect of sequentially introduced positive or negative changes to an initial value. Below example shows PHP Waterfall Chart with custom colors. It also includes source code that you can try running locally.

<?php

$dataPoints = array( 
	array("label" => "Sales",  "y" => 1143 ),
	array("label" => "Service", "y" => 500 ),
	array("label" => "Total Revenue", "isIntermediateSum" => true),
	array("label" => "Research", "y" => -200 ),
	array("label" => "Marketing",  "y" => -226 ),
	array("label" => "Salaries", "y" => -559 ),
	array("label" => "Operating Income", "isCumulativeSum" => true ),
	array("label" => "Taxes",  "y" => -300 ),
	array("label" => "Net Income",  "isCumulativeSum" => true )
);

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title: {
		text: "Company Finance"
	},
	axisY: {
		title: "Amount (in USD)",
		prefix: "$",
		suffix: "k",
		gridThickness: 0
	},
	data: [{
		type: "waterfall",
		risingColor: "#428CFF",
		fallingColor: "#FF8C8C",
		indexLabel: "{y}",
		indexLabelFontColor: "#292B2C",
		indexLabelFontWeight: "bolder",
		indexLabelPlacement: "inside",
		yValueFormatString: "$#,##0k",
		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

risingColor and fallingColor properties can be used to set custom colors for columns representing positive and negative changes. Some other commonly used customization options are fillOpacity, showInLegend, color, etc.