JSFiddle - React, Tailwind, and code Playground

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:200px; width:500px; height: 300px; margin: 0"></div>

JavaScript

$(function () {
    window.chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            zoomType: 'x',
            marginBottom: 25,
            marginTop: 0,
            xheight:100,
            plotBorderColor: 'red',
            plotBorderWidth: 1,
            spacingTop: 0,
            spacingBottom: 0,
        },
                
        credits : {
            enabled : false
        },
        
        exporting: {
            enabled: false
        },

        title: null,

        xAxis: {
            lineWidth: 0,
            lineColor: 'transparent',
            labels: {
                enabled: true
            },
            categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
        },

        yAxis: {
            lineColor: 'transparent',
            labels: {
                enabled: false
            },
            title: { text: null },
        },

        plotOptions: {
            bubble:{
               // minSize:100,
                //maxSize:200,
                minSIze:'10%',
                maxSize:'75%'
            }
        },

        legend: {
            enabled: false
        },

        series: [
        {
            type: 'bubble',
            lineWidth: 0,
   
            data: [
                [0, 0, 5],
                [1, 0, 10],
                [2, 0, 200],
                [3, 0, 600],
                [4, 0, 20],
                [null,null,null],
                [6, 0, 500],
                [7, 0, 400]
            ],
        }]
    });
});