Horizontal aligning of StripLine labels when placed inside(work-around) - CanvasJS JavaScript Charts

Horizontal aligning of StripLine labels when placed inside(work-around) - 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 stripLineLabels =[];
var stripLines = [];
var options = {
  title: {
    text: "Horizontal Aligning of StripLine Labels"
  },
  axisX: {
    stripLines: [
      {
        startValue: 25,
        endValue: 30,
        label: "first"
      },
      {
        startValue: 55,
        endValue: 60,
        label: "second"
      },
      {
        startValue: 85,
        endValue: 90,
        label: "third"
      }
    ]
  },
  data: [
    {  	
      type: "spline",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    },
    {
      type: "scatter",
      indexLabelOrientation: "horizontal",
      toolTipContent: null,
      highlightEnabled: false,
      fillOpacity: 0,
      dataPoints: stripLineLabels,
    }					
  ]
};

stripLines = options.axisX.stripLines;
for(var i = 0; i < stripLines.length; i++) {
  stripLineLabels.push({
    x: stripLines[i].startValue + ((stripLines[i].endValue - stripLines[i].startValue) / 2),
    y: 120, //Change y-value as per requirement
    indexLabel: stripLines[i].label
  });
  options.axisX.stripLines[i].label = "";
}
var chart = new CanvasJS.Chart("chartContainer", options)
chart.render();