Basic Column Chart - CanvasJS

Basic Column Chart

by saqib92

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

let a = [];
    let b = [];
    let f = [];
    let maxY = 0;
var chart = new CanvasJS.Chart("chartContainer", {
 animationEnabled: true,
  theme: "light1",

  axisY: {
    labelFormatter: function(e) {
      return Math.round((e.value/maxY*100)) +"%";      	
    },
  },
  axisX:{
    gridThickness: 1,
    tickLength: 0,
    lineThickness: 0,
    valueFormatString: "DD MMM,YY",
  },
  legend: {
    cursor: "pointer",
    itemclick: this.toogleDataSeries
  },
  data: [
  {				
  	type: "spline",
    markerSize: 1,
    showInLegend: true,
 dataPoints: [
        { x: new Date(2020, 08, 01), y: 71 },
        { x: new Date(2020, 08, 02), y: 55 },
        { x: new Date(2020, 08, 03), y: 50 },
        { x: new Date(2020, 08, 04), y: 65 },
        { x: new Date(2020, 08, 05), y: 95 },
        { x: new Date(2020, 08, 06), y: 68 },
        { x: new Date(2020, 08, 07), y: 28 },
        { x: new Date(2020, 08, 08), y: 34 },
        { x: new Date(2020, 08, 09), y: 14 },
        { x: new Date(2020, 08, 10), y: 71 },
        { x: new Date(2020, 08, 11), y: 711 },
        { x: new Date(2020, 08, 12), y: 55 },
        { x: new Date(2020, 08, 13), y: 50 },
        { x: new Date(2020, 08, 14), y: 65 },
        { x: new Date(2020, 08, 15), y: 95 },
        { x: new Date(2020, 08, 16), y: 68 },
        { x: new Date(2020, 08, 17), y: 28 },
        { x: new Date(2020, 08, 18), y: 34 },
        { x: new Date(2020, 08, 19), y: 14 },
        { x: new Date(2020, 08, 20), y: 71 },
        { x: new Date(2020, 08, 21), y: 11 },
        { x: new Date(2020, 08, 22), y: 55 },
        { x: new Date(2020, 08, 23), y: 50 },
        { x: new Date(2020, 08, 24), y: 65 },
        { x: new Date(2020, 08, 25), y: 95 },
        { x: new Date(2020, 08, 26), y: 68 },
        { x: new Date(2020, 08, 27), y: 28 },
        { x: new Date(2020, 08, 28), y: 34 },
        { x: new Date(2020, 08, 29), y: 14 }
        ]
  },
  {	
  	type: "spline",
    markerSize: 1,
    showInLegend: true,
    
    dataPoints: [
...