JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>항만, 항공</title>
        <style id="rmd-demo-style">
            html {
                margin: 0px;
            }
            body {
                margin: 20px 30px;
            }
            #realmap {
                width: 1200px;
                height: 1500px;
                border: 1px solid lightgray;
                margin-bottom: 20px;
            }

            .summaryTable {
                width: 100%;
                font-size: 10px;
                background-color: #f2f2f2;
                border-collapse: collapse;
            }

            .summaryTable th,
            .summaryTable td {
                border: 1px solid white;
                padding: 1px 3px;
                text-align: right;
            }

            .summaryTable th {
                background-color: #99d3ef;
                text-align: center;
                font-weight: bold;
            }

            .summaryTable th.title,
            .summaryTable td.title {
                background-color: #daeef9;
                text-align: center;
                font-weight: 400;
            }

            .harborLegend {
                font-size: 10px;
                border-collapse: collapse;
            }

            .harborLegend tbody {
                background-color: #fdfdfd;
            }

            .harborLegend th,
            .harborLegend td {
                border: none;
                padding: 1px 3px;
                text-align: left;
            }
            .panel {
                width: 120px;
                p {
                    font-size: 10px;
                    font-weight: bold;
                    margin: 0;
                }
                table {
                    width: 100%;
...

JavaScript

let chart;
const config = {
  templates: {
    '@series': {
      figure: {
        legend: 'harbor',
        tooltipText: '<t style="font-size: 16px; font-weight: 700;">${이름}(${type})</t>',
        pointLabel: {
          visible: true,
          text: '${이름}',
          effect: 'outline',
          style: {
            fill: 'black',
            fontWeight: '400',
            fontSize: '10px'
          }
        }
      }
    }
  },
  title: {
    visible: false
  },
  credits: {
    visible: false
  },
  map: [{
    url: 'https://unpkg.com/realmap-collection/korea-low.topo.json',
    padding: '3',
    showDummies: true,
    needInternal: true,
    needExternal: true,
    borders: [{
      name: 'c2',
      border: ['CHN', ['PRK-3310', 'PRK-3312', 'PRK-3314', 'PRK-3307', 'PRK-5495']]
    }, {
      name: 'c3',
      border: ['RUS', 'PRK-5495']
    }, {
      name: 'c4',
      border: ['CHN', 'RUS']
    }]
  }],
  axis: {
    crosshair: {
      visible: false
    }
  },
  body: {
    projection: 'mercator',
    movable: false,
    zoom: 340,
    panX: -0.5,
    panY: -3.8,
    mapBackground: {
      visible: true,
      style: {
        fill: '#E3F0F8'
      }
    }
  },
  annotation: [{
    type: 'html',
    front: true,
    html: '#port-airport-total-summary-template',
    width: 500,
    offsetX: 20,
    offsetY: 20,
    params: {
      totalSum: 1510125439,
      domesticTotal: 233897801,
      foreignTotal: 1276227638,
      foreignShip: 938195309,
      koreanShip: 338032329,
      departureTotal: 431786143,
      departureForeign: 431786143,
      departureForeignShip: 378775860,
      departureKoreanShip: 53010283,
      arrivalTotal: 844441495,
      arrivalForeign: 844441495,
      arrivalForeignShip: 759067449,
      arrivalKoreanShip: 85374046,
      coastalCargoTotal: 223025948,
      coastalCargoDomestic: 223025948,
      coastalPassengerTotal: 10871853,
      coastalPassengerDomestic: 10871853
    }
  }, {
    type: 'html',
    front: true,
   ...