Work-around for grouping Labels - CanvasJS JavaScript Charts

Work-around for grouping 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",
{ 
	axisX: {
  	interval: 1,
  	labelFormatter: function(e) {
      return formatter(e.value);
    }
  },
  toolTip: {
  	contentFormatter: function(e) {
    	var formattedX = formatter(e.entries[0].dataPoint.x);
    	return "<b>" + formattedX + ": </b>" + e.entries[0].dataPoint.y;
    }
  },
	data: [
	{
		type: "line",
		dataPoints: [
			{ x: new Date(2017, 6, 21, 5), y: 71 },
			{ x: new Date(2017, 6, 21, 11), y: 55 },
			{ x: new Date(2017, 6, 21, 17), y: 50 },
			{ x: new Date(2017, 6, 21, 23), y: 65 },
			{ x: new Date(2017, 6, 22, 5), y: 95 },
			{ x: new Date(2017, 6, 22, 11), y: 68 },
			{ x: new Date(2017, 6, 22, 17), y: 28 },
			{ x: new Date(2017, 6, 22, 23), y: 34 },
			{ x: new Date(2017, 6, 23, 5), y: 14 }
		]
	}					
	]
});
function formatter(value) {
  var hour = value.getHours();
  var timeOfDay;

  if( hour >= 0 && hour <= 5) timeOfDay = "Early morning";
  else if( hour > 5 && hour <= 11) timeOfDay = "Morning";
  else if( hour > 11 && hour <= 17) timeOfDay = "Afternoon";
  else timeOfDay = "Evening"; //From 18 to 23 Hrs

  return value.getDate() + "/" + value.getMonth() + " - " + timeOfDay;
}
chart.render();