JSFiddle - React, Tailwind, and code Playground

by Chitkala More

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
      exporting : {
			enabled : false
		},
		chart : {
			type : 'bar',
			width : 450,
			height : 320,
			
		    
		},
		title: {
	        text: ''
	    },
		xAxis : {
			categories : [ 'one', 'two', 'three', 'four', 'five' ],
			title : {
				text : null
			},
			labels: {
				style: {
					font: "100px"
	           }
	        },
		},
		yAxis : {
			min : 0,
			gridLineWidth: 1,
			gridLineColor: '#cecece',
			title : {
				text : 'Percentage'
			},
		},
		tooltip : {
			valueSuffix : ''
		},
		  plotOptions: {
              columnrange: {
                  tooltip: {
                      valueSuffix: '',
                      pointFormatter: function (a, b, c) {
                          return '<span style="color:' + this.series.color + '">●</span> ' + this.series.name + ': <b>' + this.high + '</b><br/>';
                      }
                  }
              },
              plotOptions: {
                  bar: {
                      dataLabels: {
                          enabled: true,
                      }
                  }
              },
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              floating: true,
              borderWidth: 1,
              backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
              shadow: true
          },
		credits : {
			enabled : false
		},
    series : [{
				name:'Class 5+',
				color : '#31588C',
				pointWidth: 18,
				data : [42,22,13,16,18]
			},{
				name:'Class 4+',
				color:'#59A8F7',
				pointWidth: 18,
				data : [45,15,25,18,35]
			},{
                name : 'Type 1',
                type : 'columnrange',
                data : [[45.0,45.2],[],[],[],[25.0,25.2]],
                color : '#E97EA4',
                borderColor : '#E97EA4',
                pointWidth: 10
                
               },{
                name : 'Type 2',
       ...