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

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Chart with Zoom wheelmouse and auto-pan"
  },
  data: [{
    type: 'line',
    dataPoints: [

      { x: 10, y: 71 },
      { x: 20, y: 55},
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 28 },
      { x: 100, y: 68 },
      { x: 110, y: 95 },
      { x: 120, y: 65 },
      { x: 130, y: 50 },
      { x: 140, y: 55 },
      { x: 150, y: 71 }

/*    
      { x: new Date(2020,3,20), y: 71 },
      { x: new Date(2020,3,21), y: 55 },
      { x: new Date(2020,3,22), y: 50 },
      { x: new Date(2020,3,23), y: 65 },
      { x: new Date(2020,3,24), y: 95 },
      { x: new Date(2020,3,25), y: 68 },
      { x: new Date(2020,3,26), y: 28 },      
      { x: new Date(2020,3,27), y: 34 },
      { x: new Date(2020,3,28), y: 28},
      { x: new Date(2020,3,29), y: 68 },
      { x: new Date(2020,3,30), y: 50 },
      { x: new Date(2020,4,1), y: 95 },
      { x: new Date(2020,4,2), y: 65 },
      { x: new Date(2020,4,3), y: 50 },
      { x: new Date(2020,4,4), y: 55 },
      { x: new Date(2020,4,5), y: 71}
*/
    ]
  }]
});

chart.render();
document.getElementsByClassName("canvasjs-chart-canvas")[1].addEventListener("wheel", myZoomFunction);



function myZoomFunction(e){
  e.preventDefault();
  //alert(e);
  if(e.clientX < chart.plotArea.x1 || e.clientX > chart.plotArea.x2 || e.clientY < chart.plotArea.y1 || e.clientY > chart.plotArea.y2)
    return;

  var axisX = chart.axisX[0];
  var viewportMin = axisX.get("viewportMinimum"),
      viewportMax = axisX.get("viewportMaximum"),
      interval = axisX.get("minimum");

// get X and Y position
    var parentOffset = $(this).parent().offset();
		var relX = e.pageX - parentOffset.left;
		var relY = e.pageY - parentOffset.top
		var xValue = Math.round(chart.axisX[0].convertPixelToValue(relX));
		var yValue =...