JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

CSS

.highcharts-tooltip h3 {
    margin: 0.3em 0;
}

JavaScript

$(function () {

    // store data outside configuration
		var graphData = [
      { x: 0, y: 0, z: 0, name: 'NO', country: 'Norway' },
      { x: 1, y: 1, z: 5, name: 'UK', country: 'United Kingdom' },
    ];
    
    // loop each point to build an array of [minX, maxX, minY, maxY]
    var ranges = graphData.reduce(function(prev, curr) {
    	  // first iteration, set min and max to current value
        if(prev === null) {
        	return [curr.x, curr.x, curr.y, curr.y];
        }
        
        // return array with new min/maxes
        return [
        	curr.x < prev[0] ? curr.x : prev[0],
          curr.x > prev[1] ? curr.x : prev[1],
          curr.y < prev[2] ? curr.y : prev[2],
          curr.y > prev[3] ? curr.y : prev[3]
        ];
    }, null);
    
    // now calculate the extremes. We will use these to set the extremes later
    // also add a bit of padding so the bubble isn't too obscured off screen.
    var maxX = Math.max(Math.abs(ranges[0]), Math.abs(ranges[1])) + 0.1;
    var maxY = Math.max(Math.abs(ranges[2]), Math.abs(ranges[3])) + 0.1;
    
    var chart = $('#container').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        legend: {
            enabled: false
        },

        title: {
            text: 'Sugar and fat intake per country'
        },

        subtitle: {
            text: ''
        },

        xAxis: {
            gridLineWidth: 1,
            title: {
                text: 'Daily fat intake'
            },
            labels: {
                format: ''
            },
            plotLines: [{
                color: 'black',
                dashStyle: 'dot',
                width: 2,
                value: 0,
                label: {
                    rotation: 0,
                    y: 15,
                    style: {
                        fontStyle: 'italic'
                    },
                    text: 'CLICK'
              ...