Formatting the date-time on axis X - CanvasJS JavaScript Charts

Formatting the date-time on axis X - 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="rssi" style="height: 360px; width: 100%;"></div>

JavaScript

var dataPoint = [
  { x: new Date("2018-01-07T20:51:05.000Z"), y: -6 },
  { x: new Date("2018-01-07T20:51:05.000Z"), y: -21 },
  { x: new Date("2018-01-07T20:51:05.000Z"), y: -29 },
  { x: new Date("2018-01-07T20:51:06.000Z"), y: -44 },
  { x: new Date("2018-01-07T20:51:41.000Z"), y: -67 }
];

var chart = new CanvasJS.Chart("rssi", {
  exportEnabled: true,
  zoomEnabled: true,
  title: {
    text: "RSSI signal / Date time"
  },
  axisX: {
    intervalType: "hour",
    valueFormatString: "YYYY-MM-DD HH:mm:ss",
    labelMaxWidth: 100, // change label width accordingly
  },
  axisY: {
    title: "Downloads"
  },
  data: [{
    type: "area",
    name: " RSSI value",
    showInLegend: true,
    xValueType: "dateTime",
    markerType: "square",
    color: "#F08080",
    dataPoints: dataPoint
  }]
});
chart.render();