Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

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>

TypeScript

let serieX = [];
let serieY = [];
let serieZ = [];
let dotSerie = [];
let date = new Date();

for(let i = 0; i < 25000; i++) {
	let serieDate = date;
	serieX.push({
  	x: new Date(date.toString()),
    y: Math.floor(Math.random() * 10) + 5
  });
  serieY.push({
  	x: new Date(date.toString()),
    y: Math.floor(Math.random() * 10) + 5
  });
  serieZ.push({
  	x: new Date(date.toString()),
    y: Math.floor(Math.random() * 10) + 5
  });
  
  if(i%2500 === 0) {
  	dotSerie.push({
    	x: serieDate.setMinutes(serieDate.getMinutes() + 1),
      y: 1,
      toolTipContent: "Dot tooltip test"
    })
  }
  
  date.setMinutes(date.getMinutes() + 5);
}

console.log(dotSerie)

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,  
  zoomEnabled: true,
  zoomType: "x",
  axisX: {
    titleFontSize: 14,
    titleFontWeight: "bold",
    gridThickness: 1,
    gridDashType: "solid",
    gridColor: "rgba(192,192,192,0.64)",   
    tickLength: 10,   
    labelAngle: 0,
    labelFontColor: "rgba(0,0,0,0.54)",
    labelFontSize: 11,
    crosshair: {
      enabled: true,
			snapToDataPoint: true,
      lineDashType: "solid",
      thickness: 3,
      color: "rgba(0,0,0,0.51)",
    }
  },
  axisY: {
    title: "Test",
    titleFontSize: 14,
    titleFontWeight: "bold",
    gridThickness: 1,
    includeZero: true,
    gridDashType: "dash",
    gridColor: "rgba(192,192,192,0.64)",
    labelFontColor: "rgba(0,0,0,0.54)",
    labelFontSize: 11,
  },
  toolTip: {
    shared: true,
    borderThickness: 0,
    content: function(e) {
      return "This should be shared tooltip";
    }
  },
  data: [
    {
      type:"line",
      xValueType: "dateTime",
      name: "X",
      lineColor: "#3C669B",
      markerColor: "#3C669B",
      markerSize: 0,
      dataPoints: serieX
    },
    {
      type:"line",
      xValueType: "dateTime",
      name: "Y",
      lineColor: "#6AE3C2",
      markerColor: "#6AE3C2",
      markerSize: 0,
      dataPoints: serieY
    },
    {
    ...