Add Axis labels using stripLine - CanvasJS JavaScript Charts

Add Axis labels using stripLine - 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: "Using formatDate inside Custom Formatter"
		},
		axisX: {
			labelFormatter: function (e) {              
             return "";
			},
      gridThickness: 0,
      tickThickness: 0
		},		
		data: [
		{
			type: "line",
			dataPoints: [
				{ x: new Date(2015, 10, 1), y: 145 },
        { x: new Date(2015, 10, 30), y: 145 },
        { x: new Date(2015, 11, 1), y: 122 },
        { x: new Date(2015, 11, 31), y: 122 },
				{ x: new Date(2016, 0, 1), y: 103 },
				{ x: new Date(2016, 1, 1), y: 102 },
				{ x: new Date(2016, 2, 1), y: 158 },
        { x: new Date(2016, 2, 31), y: 158 },
				{ x: new Date(2016, 3, 1), y: 34 },
				{ x: new Date(2016, 4, 1), y: 363 },
				{ x: new Date(2016, 5, 1), y: 247 },
				{ x: new Date(2016, 6, 1), y: 253 },
				{ x: new Date(2016, 7, 1), y: 269 },
				{ x: new Date(2016, 8, 1), y: 343 },
				{ x: new Date(2016, 9, 1), y: 370 }
			]
		}
		]                      
	});
chart.render();
  
addLabels(chart);

function addLabels(chart){
    var minimum = new Date("2015-10-31").getTime();
    var maximum = chart.axisX[0].get("maximum");
    var interval = null;
		var quarterEndMonth = 0;
    
    for( var i = minimum; i < maximum; i+= interval){
        value = new Date( i - (24 * 60 * 60 * 1000)).setHours(0, 0, 0, 0);
        interval = (getDaysInMonth(new Date(i).getMonth(), new Date(i).getFullYear())) * 24 * 60 * 60 * 1000;
				if( (new Date(value)).getMonth()  === (parseInt((new Date(value)).getMonth() / 3 ) * 3 ) + 2 ){
          chart.axisX[0].addTo("stripLines", {
              value: value,
              label: value,
              labelPlacement: "outside",
              color: "#a3a3a3",              
              labelBackgroundColor: "transparent",
              labelFontColor: "#a3a3a3",
              labelFormatter: function (e) {
                var count = (new Date(e.stripLine.value).getMonth()/3 << 0) + 1;
                return "Q" + count + " "...