JSFiddle - React, Tailwind, and code Playground

author(s):

by grant

HTML

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

<div id="container" height='900px'></div>

JavaScript

Highcharts.chart('container', {
xAxis: {
	  
},
  yAxis: {
  opposite: true,
    min: 0,
    max: 11000,
    
    gridlinewidth: 1,
    title: undefined,
    lineWidth: 1,
    labels: {
      formatter: function() {
        var suffix;

        if (this.value == 0) {
          suffix = ' 0';
          } else if (this.value <= 465) {
          suffix = ' 1';
          } else if (this.value <= 857) {
          suffix = '2';
          } else if (this.value <= 1140) {
          suffix = '3';
          } else if (this.value <= 1608) {
          suffix = '4';
          } else if (this.value <= 2429) {
          suffix = '5';
          } else if (this.value <= 3411) {
          suffix = '6';
          } else if (this.value <= 4562) {
          suffix = '7';
          } else if (this.value <= 5844) {
          suffix = '8';
          } else if (this.value <= 7683) {
          suffix = '9';
          } else if (this.value <= 10788) {
          suffix = '10';
        } else {
          suffix = ' 11';
        }
//return labels[this.pos -1]
        return  suffix;
      }
    }
  },

  series: [{
	type: 'spline',
   // data: [4, 3, 5, 6, 2, 3]
    //data: ['', 400, 1000, 3002]
    data: [0, 465, 857, 1140, 1608, 2429, 3411, 4562, 5844, 7683, 10788]
  }]

});