Replacing axis X values with labels - CanvasJS JavaScript Charts

Replacing axis X values with labels - 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",{
  theme: "theme3",
  animationEnabled: true,
  axisX: {
    interval: 1,
    intervalType: "hour",
  },
  dataPointWidth: 20,
  data: [
    {
      type: "column",
      name: "Forecast",
      legendText: "Forecast",
      showInLegend: true,
      dataPoints: [
        { x: new Date(2017, 08, 2, 02, 00), y: 26 },
        { x: new Date(2017, 08, 2, 03, 00), y: 38 },
        { x: new Date(2017, 08, 2, 08, 00), y: 29 },
        { x: new Date(2017, 08, 2, 09, 00), y: 41 }]
    },
    {
      type: "column",
      name: "Sales",
      legendText: "Sales",
      showInLegend: true,
      dataPoints: [
        { x: new Date(2017, 08, 2, 02, 00), y: 20 },
        { x: new Date(2017, 08, 2, 03, 00), y: 30 },
        { x: new Date(2017, 08, 2, 08, 00), y: 20 },
        { x: new Date(2017, 08, 2, 09, 00), y: 30 }]
    },
    {
      type: "line",
      showInLegend: true,
      legendText: "Sales per labour",
      dataPoints: [
        { x: new Date(2017, 08, 2, 02, 00), y: 20 },
        { x: new Date(2017, 08, 2, 03, 00), y: 50 },
        { x: new Date(2017, 08, 2, 04, 00), y: 10 },
        { x: new Date(2017, 08, 2, 09, 00), y: 90 }]
    },
    {
      type: "line",
      showInLegend: true,
      legendText: "Initial Notes",
      dataPoints: [
        { x: new Date(2017, 08, 2, 02, 00), y: 0, markerSize: 15, markerColor: "#333" },
        { x: new Date(2017, 08, 2, 03, 30), y: 0, markerSize: 15, markerColor: "#333" },
        { x: new Date(2017, 08, 2, 04, 50), y: 0, markerSize: 15, markerColor: "#333" },
        { x: new Date(2017, 08, 2, 09, 00), y: 0, markerSize: 15, markerColor: "#333" }]
    }]
});

manageAxisXLabels();

function manageAxisXLabels() {
  var insertLabels = [];
  for(var j=0; j< chart.options.data.length; j++)
  {
    for(var i=0 ; i< chart.options.data[j].dataPoints.length ; i++)
    {   
      var insert = true;
      for(var k = 0; k < insertLabels.length; k++){
       ...