JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div>
switch to the complex data by uncommenting it on line 28.
</div>
<div id="container" style="height: 400px; width: 100%"></div>

JavaScript

var myLabels = ["Very Low", "Low", "Medium", "High", "Very High", "Really High", "Yep! This is high"];
var labels = ['', '1', '2', '3', '4', '5', '6', '7', '8', 'still higher', 'really high']

Highcharts.chart('container', {
       title: {
        text: 'custom y axis labels',
    },
     subtitle: {
    text: 'no workie'
},     
  /*    yAxis: {
    opposite: true,
      labels: {
        formatter: function() {
          return labels[this.pos -1]
        }
      }
    },
   */ 
    yAxis: {  
    tickInterval: 1,
        labels: {
            formatter: function() {
                return labels[this.value ];
            }
        }
    },

  series: [{
// data: [0, 1.5, 2, 3, 4, 5,6,7],
 data: [0 ,465, 857, 1140, 1608, 2429, 3411, 4562, 5844, 7683, 10788]
  }]

});