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="height: 400px; width: 600px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({

        chart: {
            renderTo: 'container',
            type: 'bubble',
            zoomType: 'xy'
        },
        xAxis: {
            min: 0,
            max: 50
        },
        yAxis: {
            min: 0,
            max: 50
        },
        title: {
            text: 'Highcharts Bubbles'
        },
        series: [{
            /* this empty bubble keeps other bubbles relative to each other in size */
            name: '', data: [{x:0,y:0,z:0}], showInLegend: false, color: '#FFFFFF', enableMouseTracking: false
        }, {
            name: 'SERIES 1', data: [{x:37,y:35,z:50}]
        }, {
            name: 'SERIES 2', data: [{x:25,y:10,z:100}]
        }, {
            name: 'SERIES 3', data: [{x:47,y:47,z:150}]
        }]

    });

});