JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/europe.js"></script>


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

JavaScript

const options = {
  series: [{
    mapData: Highcharts.maps['custom/europe'],
    data: [
      ['is', 1],
      ['no', 1],
      ['se', 1],
      ['dk', 1],
      ['fi', 1]
    ]
  }],
  tooltip: {
    followPointer: false,
      backgroundColor: '#ff9600',
      borderWidth: 1,
      borderColor: '#ff9600',
      borderRadius: 2,
      formatter: function () {
          return '<b>' +
          '<span style="'+ 'tooltipStyle' + '">' + this.point.name + ': $ 620 USD</span><br>' +
          '<span style="'+ 'tooltipStyle' + '">' + this.point.value + ' Transactions</span>';
      }
  }
}

const chart = Highcharts.mapChart('container', options)