JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

HTML

<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 500px"></div>

CSS

.highcharts-figure, .highcharts-data-table table {
  min-width: 310px; 
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

JavaScript

var chart = new Highcharts.Chart({
chart: {
        renderTo:'container',
        defaultSeriesType:'column',
        borderWidth:0,
        backgroundColor:'#eee',
        borderWidth:1,
        borderColor:'#ccc',
        plotBackgroundColor:'#fff',
        plotBorderWidth:1,
        plotBorderColor:'#ccc'
    },
    credits:{enabled:false},
    exporting:{enabled:false},
    title:{text:'Histogram Test'},
    legend:{
        //enabled:false
    },
    tooltip:{
        borderWidth:1,
        formatter:function() {
            return '<b>Range:</b><br/> '+ this.x +'<br/>'+
            '<b>Count:</b> '+ this.y;
        }
    },
    plotOptions:{
        column:{
            shadow:false,
            borderWidth:.5,
            borderColor:'#666',
            pointPadding:0,
            groupPadding:0,
            color: 'rgba(204,204,204,.85)'
        },
        spline:{
            shadow:false,
            marker:{
                radius:1
            }
        },
        areaspline:{
            color:'rgb(69, 114, 167)',
            fillColor:'rgba(69, 114, 167,.25)',
            shadow:false,
            marker:{
                radius:1
            }
        }
    },
    xAxis:{
        categories: ['> 48.00 =< 51.81','> 51.81 =< 54.63','> 54.63 =< 57.44','> 57.44 =< 60.25','> 60.25 =< 63.06','> 63.06 =< 65.88','> 65.88 =< 68.69','> 68.69 =< 71.50','> 71.50 =< 74.31','> 74.31 =< 77.13','> 77.13 =< 79.94','> 79.94 =< 82.75','> 82.75 =< 85.56','> 85.56 =< 88.38','> 88.38 =< 91.19','> 91.19 =< 94.00'],
        labels:{
            rotation:-90,
            y:40,
            style: {
                fontSize:'8px',
                fontWeight:'normal',
                color:'#333'
            },
        },
        lineWidth:0,
        lineColor:'#999',
        tickLength:70,
        tickColor:'#ccc',
    },
    yAxis:{
        title:{text:''},
        //maxPadding:0,
        gridLineColor:'#e9e9e9',
        tickWidth:1,
        tickLength:3,
       ...