JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
<div id="container"></div>

CSS

#container {
  max-width: 800px;
  height: 400px;
  margin: 1em auto;
}

JavaScript

var x = ["8.0-8.0", "8.07-8.1", "8.13-8.13", "8.17-8.19", "8.23-8.23", "8.27-8.27", "8.28-8.30", "8.31-8.32", "8.33-8.35", "8.35-8.36"];
var y = [2, 22, 28, 26, 4, 3, 5, 4, 7, 9];
Highcharts.chart('container', {
  title: {
    text: 'Highcharts Histogram'
  },
  xAxis: [{
    title: {
      text: 'Data'
    },
    labels: {
      y: 20,
      lineWidth: 0,
      lineColor: '#999',
      tickLength: 40,
    },
    categories: x,
    plotLines: [{
        color: '#f00',
        value: 7.8,
        width: 2,
        zIndex: 4
      },
      {
        color: '#f00',
        value: 9,
        width: 2,
        zIndex: 4
      }
    ]
  }],

  yAxis: [{
    title: {
      text: 'Count'
    }
  }],

  series: [{
      name: 'Histogram',
      type: 'histogram',
      data: y
    },
    {
      name: 'Spline',
      data: y,
      type: 'spline'
    }
  ]
});