Formatting date and time on Axis X with valueFormatString - CanvasJS JavaScript Charts

Formatting date and time on Axis X with valueFormatString - 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 options = {
  animationEnabled: true,
  theme: "light2",
  title:{
    text: "Parboiling Data"
  },
  axisY2:{
    lineThickness: 0
  },
  axisX:{
    valueFormatString: "HH:mm"
  },
  toolTip:{
    shared: true,
    reversed: true
  },
  legend:{
    verticalAlign: "top",
    horizontalAlign: "center"
  },
  data: [
    {
      type: "stackedBar",
      showInLegend: true,
      name: "Vafai",
      axisYType: "secondary",
      color: "#FFFF00",
      dataPoints: [
        { x: new Date(2018,01,04,12,05), y: 5 },
        { x: new Date(2018,01,04,18,10), y: 12 }
      ]
    },
    {
      type: "stackedBar",
      showInLegend: true,
      name: "Pani",
      axisYType: "secondary",
      color: "#92D050",
      dataPoints: [
        { x: new Date(2018,01,04,12,05), y: .5 },
        { x: new Date(2018,01,04,18,10), y: 3 }
      ]
    },
    {
      type: "stackedBar",
      showInLegend: true,
      name: "Load",
      axisYType: "secondary",
      color: "#00B0F0",
      dataPoints: [
        { x: new Date(2018,01,04,12,05), y: 3 },
        { x: new Date(2018,01,04,18,10), y: 6 }
      ]
    }

  ]
};

var chart = new CanvasJS.Chart("chartContainer", options);
chart.render();