JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div class="highchart">

JavaScript

$(function () {
var cats 		= ['1', '2', '3', '4', '5'];
  var width 	= 375;
  var height	= cats.length * 100;
  var value = 0;

  var maxScore = 2453 + 50; 
  
    var chart = $('.highchart').highcharts({

        chart: {
            backgroundColor:'#fff',
            type: 'bar',
            width:width,
            height:height,
        },

        title: {
            text: ''
        },
        credits: {
			      enabled: false
			  },
        exporting: { enabled: false },
        legend: {
            enabled: false
        },
				scrollbar: {
		        enabled: false
		    },
        xAxis: {
            categories: cats,
      
            labels: {
            	
                style: {
                	display:'block',
                	fontWeight: 'bold',
                    
                },
                x:350,
            },
            min:0,
          	
        },
      
        yAxis: {
         		   /* stackLabels: {
                    formatter: function() {
                    	
													return this.axis.chart.xAxis[0].categories[this.x];
										 		
                        
                      },
                      enabled: true,           
               			  verticalAlign: 'top',     
                		  align: 'left',
                y: -5
                    },*/
            allowDecimals: false,
            min: 0,
            max: maxScore,
            gridLineWidth: 0,
            title: {
                text: '',
                 rotation:0,
           				 margin:0
            },
            labels: {
                formatter: function () {
                  return '';
                },
            },
           
        },
   
     tooltip: {
        	enabled:false,
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },
...