JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/highslide-software/highcharts.com/master/js/highcharts.src.js"></script>
<script src="https://raw.github.com/highslide-software/highcharts.com/master/js/modules/map.src.js"></script>
<script src="https://raw.github.com/highslide-software/highcharts.com/master/js/modules/googlespreadsheet.src.js"></script>
<script src="http://www.highcharts.com/studies/world-map-shapes.js"></script>
<div id="container" style="width: 600px; height: 400px"></div>

JavaScript

var chart;

            $(document).ready(function() {
                
                // Load the data from a Google Spreadsheet 
                // https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
                Highcharts.getGoogleSpreadsheet({
                    
                    key: '0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc',
                    
                    // custom handler for columns
                    columns: function(columns) {
                        
                        // Make the columns easier to read
                        var countryCodes = columns[0],
                            countryNames = columns[1],
                            populationDensities = columns[2];

                        var options = {
                            chart : {
                                renderTo : 'container',
                                borderWidth : 1
                            },
                            
                            title : {
                                text : 'Population density by country (/km²)'
                            },
                            
                            subtitle: {
                                text: 'Please excuse the creative projection - this is a work in progress'
                            },
                            
                            legend: {
                                align: 'left',
                                verticalAlign: 'bottom',
                                floating: true,
                                layout: 'vertical',
                                valueDecimals: 0
                            },
                            
                            tooltip: {
                                ySuffix: '/km²'
                            },
        
                            series : [{
                                data : [],
     ...