Setting color of individual axisY label using stripLines - CanvasJS JavaScript Charts

Setting color of individual axisY label using stripLines - CanvasJS JavaScript Charts

by canvasjs

HTML

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

JavaScript

var axisYLabels = {};
var axisLabelColors = ["#4F81BC", "#C0504E", "#9BBB58", "#23BFAA", "#8064A1"];

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Setting Color of Individual AxisY Label"
  },
  axisY: {
    labelFormatter: function(e) {
      if(axisYLabels[e.value] === undefined) {
        axisYLabels[e.value] = e.value;
      }
      return "";
    }
  },
  data: [{
    dataPoints: [
      { label: "apple", y: 71 },
      { label: "orange", y: 55 },
      { label: "mango", y: 50 },
      { label: "banana", y: 65 },
      { label: "grape", y: 95 }
    ]
  }]
});

chart.render();
changeAxisLabelColor(chart);

function changeAxisLabelColor(chart) {
  var i = 0;
  for(var label in axisYLabels) {
    if (axisYLabels.hasOwnProperty(label)) {
      chart.axisY[0].addTo("stripLines", { value: label, label: label, labelPlacement: "outside", labelBackgroundColor: "white", color: "transparent", labelFontColor: axisLabelColors[i%axisLabelColors.length] });
      i++;
    }
  }
}