Show indexLabel on only one side in rangeBar on clicking of dataPoint- CanvasJS JavaScript Charts

Show indexLabel on only one side in rangeBar on clicking of dataPoint- CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
	<div id="chartContainer" style="height: 300px; width: 100%;"></div>
	<div id="displayPixel"></div>
	<div id="dispList"></div>

CSS

.textbox {
  display: none;
}

.allign {
  position: absolute;
  width: 8px;
  height: 10px;
  border-width: 0px;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "theme1",
  title: {
    text: "Chart Denver II - Testing"
  },
  exportEnabled: true,
  axisY: {
    includeZero: false,
    interval: 1,
    tickThickness: 1,
    gridThickness: 1,
    lineThickness: 1,
    stripLines: [{
      label: "",
      value: 32.80,
      thickness: 11,
      color: "darkgrey",
      showOnTop: true,
      opacity: .4
    }],
    labelFormatter: function(e) {
      var mtmp = e.value;
      switch (mtmp) {
        case 2:
          return "2 Months";
          break;
        case 4:
        case 6:
        case 9:
        case 12:
        case 15:
        case 18:
        case 24:
          return mtmp;
          break;
        case 28:
          return "3 Years";
          break;
        case 32:
          return "4";
          break;
        case 36:
          return "5";
          break;
        case 40:
          return "6";
          break;
        default:
          return "";
          break;
      }
    }
  },
  axisX: {
    interval: 1,
    tickThickness: 0,
    lineThickness: 0
  },
  toolTip: {
    content: function(e) {
      var axisY = e.entries[0].dataSeries.axisY.title;
      var axisX = e.entries[0].dataSeries.axisX.title;
      var xVal = e.entries[0].dataPoint.x;
      var yVal = e.entries[0].dataPoint.y;
      return "X: " + xVal + " Y: " + yVal;
    }
  },
  data: [{
    type: "rangeBar",
    indexLabelFontSize: 14,
    dataPoints: [{
      x: 15,
      y: [0, 12],
      color: "#99FF99",
      label: " ",
      click: onPut
    }, {
      x: 15,
      y: [12, 30],
      color: "#AEE8FE",
      label: " ",
      click: onPut
    }, {
      x: 16,
      y: [0, 0],
      label: " "
    }, {
      x: 17,
      y: [5, 17],
      color: "#99FF99",
      label: " ",
      click: onClick3
    }, {
      x: 17,
      y: [17, 39],
      color: "#AEE8FE",
      label: " ",
      click: onClick3
    }, {
      x: 18,
      y: [0, 0],
      label: " "
    }, {
     ...