Basic Line Chart with Date-Time axis in multiple formats - CanvasJS JavaScript Charts

Basic Line Chart with Date-Time axis in multiple formats - CanvasJS JavaScript Charts

by Aashish Manandhar

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>

CSS

body {
  background: #212121;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{ 
  	theme: "dark1",
    data: [
      {
        type: "line",
        dataPoints: [
          { x: new Date("Mon Apr 20 2020 14:12:00"), y: 31804},
          { x: new Date("Mon Apr 20 2020 14:17:00"), y: 39340},
          { x: new Date("Mon Apr 20 2020 14:21:00"), y: 41764},
          { x: new Date("Mon Apr 20 2020 14:26:00"), y: 46252},
          { x: new Date("Mon Apr 20 2020 14:30:00"), y: 48600},
          { x: new Date("Mon Apr 20 2020 14:35:00"), y: 42312},
          { x: new Date("Mon Apr 20 2020 14:39:00"), y: 45876},
          { x: new Date("Mon Apr 20 2020 14:45:00"), y: 47708},
          { x: new Date("Mon Apr 20 2020 14:49:00"), y: 50260},
          { x: new Date("Mon Apr 20 2020 14:52:00"), y: 40292},
        ]
      }
    ]
  });
 chart.render();