Highcharts: Distribution plot with shadow

A redevelopment of

by MarkG76

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/xrange.js"></script> 
<div class=title>
Youth unemployment rate
</div>
<div id="container"></div>

CSS

.title {
font-weight: bold;
text-align: center;
font-family: sans-serif;
}

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

JavaScript

Highcharts.chart('container', {
    chart: { 
    },
    legend: { enabled: false} , 
    title: {
        text: '',enabled: false
    },
    xAxis: {
         min: 0, max: 80
    },
    plotOptions: {
    	bubble: { 
      	minSize: 8,
      	maxSize: 11,
      	marker: { 
        	fillOpacity: 0.8
        }
      }
    },
    tooltip :   {
				useHTML: true,
				headerFormat: '', 
				pointFormat: '<b>{point.name}</b><BR><em>{point.country}</em><br><div>{series.name} : <b>{point.x}</b> % {point.flag}</div>'  
		 },
    yAxis: {
        title: {
            text: ''
        },
        max: 36, 
        startOnTick: false, 
        showEmpty: false, 
        categories: {
            "0": "Belgium",
            "1": "Bulgaria",
            "2": "Czechia",
            "3": "Denmark",
            "4": "Germany",
            "5": "Estonia",
            "6": "Ireland",
            "7": "Greece",
            "8": "Spain",
            "9": "France",
            "10": "Croatia",
            "11": "Italy",
            "12": "Cyprus",
            "13": "Latvia",
            "14": "Lithuania",
            "15": "Luxembourg",
            "16": "Hungary",
            "17": "Malta",
            "18": "Netherlands",
            "19": "Austria",
            "20": "Poland",
            "21": "Portugal",
            "22": "Romania",
            "23": "Slovenia",
            "24": "Finland",
            "25": "Slovakia",
            "26": "Sweden",
            "27": "United Kingdom",
            "28": "Iceland",
            "29": "Liechtenstein",
            "30": "Norway",
            "31": "Switzerland",
            "32": "Montenegro",
            "33": "North Macedonia",
            "34": "Turkey",
            "35": "Albania",
            "36": "Serbia"
          },
        reversed: true
    },
    series: [{
        name: 'Range',
        type: 'xrange',
        // pointPadding: 0,
        // groupPadding: 0,
        borderColor: '#eeeeee',
        pointWidth:...