Bar Chart is represented by horizontal rectangular bars to compare value between different categories / data-series. The below example shows simple PHP Bar Chart along with source code that you can try running locally.
<?php $dataPoints = array( array("y" => 7,"label" => "March" ), array("y" => 12,"label" => "April" ), array("y" => 28,"label" => "May" ), array("y" => 18,"label" => "June" ), array("y" => 41,"label" => "July" ) ); ?> <!DOCTYPE HTML> <html> <head> <script> window.onload = function() { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, title:{ text: "Revenue Chart of Acme Corporation" }, axisY: { title: "Revenue (in USD)", includeZero: true, prefix: "$", suffix: "k" }, data: [{ type: "bar", yValueFormatString: "$#,##0K", indexLabel: "{y}", indexLabelPlacement: "inside", indexLabelFontWeight: "bolder", 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>
You can enable Index / Data Labels for the data points using the indexLabel property. Some of the other commonly used customization options include color, dataPointWidth, etc.