Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.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

window.onload = function () {

        var chart = new CanvasJS.Chart("chartContainer", {
            title: {"text":"Daily Metrics"},
            axisX: {"valueFormatString":null,"title":"Date"},
            axisY2: {"title":"Daily Total","prefix":"","suffix":"","interval":1},
            toolTip: {"shared":true},
            legend: {cursor:'pointer',verticalAlign:'top',horizontalAlign:'center',dockInsidePlotArea:true,itemclick:toggleDataSeries},
            data: [{type:'line',axisYType:'secondary',name:'Brainstorm',showInLegend:true,markerSize:0,yValueFormatString:null,dataPoints:[{x:new Date(2021,05,01),y:7},{x:new Date(2021,05,02),y:10},{x:new Date(2021,05,03),y:9},{x:new Date(2021,05,07),y:7},{x:new Date(2021,05,08),y:7}]},{type:'line',axisYType:'secondary',name:'Asked For Break',showInLegend:true,markerSize:0,yValueFormatString:null,dataPoints:[{x:new Date(2021,05,01),y:2},{x:new Date(2021,05,02),y:6},{x:new Date(2021,05,03),y:4},{x:new Date(2021,05,07),y:2},{x:new Date(2021,05,08),y:2}]}]
        });
        chart.render();

        function toggleDataSeries(e) {
            if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
            }
            chart.render();
        }
    }