<div id="chartContainer" style="height: 370px; width: 100%;"></div>

{% put styles %}
    <script>
        window.onload = function () {

            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                exportEnabled: true,
                theme: "light1", // "light1", "light2", "dark1", "dark2"
                title:{
                    text: "Simple Column Chart with Index Labels"
                },
                axisY:{
                    includeZero: true
                },
                data: [{
                    type: "column", //change type to bar, line, area, pie, etc
                    //indexLabel: "{y}", //Shows y value on all Data Points
                    indexLabelFontColor: "#5A5757",
                    indexLabelPlacement: "outside",
                    dataPoints: "<?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>"
        }]
        });
        chart.render();

        }
    </script>
{% endput %}

{% put scripts %}
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
{% endput %}