JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="https://code.highcharts.com/js/highcharts.src.js"></script>

<div id="container">
</div>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

.my-tick {
  stroke-width: 10px;
  stroke: red;
}

.my-axis .highcharts-tick {
	stroke-width: 10px;
	stroke: red;
}

JavaScript

$(function() {
  Highcharts.chart('container', {
    yAxis: {
      tickPositioner: function(min, max) {
        //here want to add class name
        //end here
        var data = this.series[0].processedYData,
          ticks = this.getLinearTickPositions(this.tickInterval, min, max);
        //add last point
        val = data[data.length - 1]
        ticks.push(data[data.length - 1]);
        ticks.sort(function(a, b) {
          return a - b;
        })
        return ticks;
      },
      className: 'my-axis',
      tickWidth: true,
    },
    
    series: [{
    	data: [1,2,3,4,5,6,7]
    }]
  });
});