Line Chart with dateTime axis - CanvasJS JavaScript Charts

Line Chart with dateTime axis - CanvasJS JavaScript Charts

by canvasjs

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: "Line Chart with dateTime axis"
  },
  toolTip:{
    contentFormatter: function (e) {
      return e.entries[0].dataPoint.indexLabel + " - " + CanvasJS.formatDate(e.entries[0].dataPoint.x, "hh:mm TT"); 
    }  
  },
  axisX: {
    valueFormatString: "hh:mm TT"
  },

  data: [
    {
      type: "line",
      dataPoints: [
        { x: new Date(2017, 04, 2, 11, 10), y: 10, indexLabel:"Michael" },
        { x: new Date(2017, 04, 2, 11, 15), y: 10, indexLabel:"John" },
        { x: new Date(2017, 04, 2, 11, 20), y: 10, indexLabel:"Julie" }
      ]
    }
  ]
});

chart.render();