Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{        
	colorSet: "chart-colors",
            animationEnabled: true,
            animationDuration: 500,
            toolTip: {
                shared: true,
                contentFormatter: (e) => {
                    var str = moment(e.entries[0].dataPoint.x).format("MM/DD/YYYY h:mm a") + "<br />";
                    for (var i = 0; i < e.entries.length; i++) {
                        str = str.concat(e.entries[i].dataSeries.name + " <strong>" + e.entries[i].dataPoint.y.toFixed(1) + "</strong> <br/>");
                    }
                    return str;
                }
            },
            axisY: {
                minimum: 0,
                gridThickness: 1,
                lineThickness: 1,
                tickThickness: 1,
                gridColor: "#f0f0f0",
                lineColor: "#f0f0f0",
                tickColor: "#f0f0f0"
            },
            axisX: {
                labelFormatter: (e) => {
                    if ("h" === "h") {
                        return moment(e.value).format("M/D h a");
                    }
                    return moment(e.value).format("h:mm a");
                },
                labelAngle: -40,
                margin: 0,
                minimum: moment().startOf('w'),
                maximum: moment().endOf('w'),
                gridThickness: 1,
                lineThickness: 1,
                tickThickness: 1,
                gridColor: "#f0f0f0",
                lineColor: "#f0f0f0",
                tickColor: "#f0f0f0"
            },
            legend: {
                verticalAlign: "bottom",
                horizontalAlign: "center",
                cursor: "pointer",
                itemclick: (e) => {
                    if (typeof e.dataSeries.visible === "undefined" || e.dataSeries.visible) {
                        e.dataSeries.visible = false;
                    }
                    else {
                       ...