JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.romania.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
 <div id="app-vue">
      <fusioncharts
      :type="type"
      :width="width"
      :height="height"
      :dataFormat="dataFormat"
      :dataSource="dataSource"
      :events="events"      
     ></fusioncharts>
  </div>

JavaScript

Vue.use(VueFusionCharts, FusionCharts);
let grphMap = new Vue ({
	el: '#app-vue',
  data: {
    	type: "maps/romania",
    	width: "800",
    	height: "600",
    	dataFormat: "json",
    	dataSource: {
    		'chart': {
      		"theme":                "fusion",
      		"nullEntityColor":      "#E5E5E9",
      		"entityFillHoverColor": "#99ccff",
      		"showLabels":           '1',
      		"showEntityHoverEffect": "1",
      		"showtooltip":          "1",
      		"connectorColor":       "#0CB2B0",
      		"connectorHoverColor": "#000000",
      		"connectorthickness":   "3",
      		"markerfontsize":       "18",
      		"markerfontcolor":      "#0a0a0a",
					"numbersuffix":         "%",
      		"entityFillColor":      "#ff0000",
      		"markerBgColor":        "#FF0000",
      		"markerRadius":         "12",
      },
      	"colorrange": {
          "gradient": "0",
      },
      	"data": [
          {
          	id: '10',
            color: "#74CCEB",
          }
      ],
      	"markers": {
          "shapes": [
      		    {
               "id": "myCustomShape",
               "type": "circle",
               "fillcolor": "#f8bd19",
               "showborder": "0"
              }
          ],
          "items": [
              {
                shapeid: "myCustomShape",
                id: "10",
                x: "295.5",
                y: "283.5",
              },
              {
                shapeid: "myCustomShape",
                id: "11",
                x: "323.9",
                y: "226.6",
              }
          ],
          "connectors": [
              {
                "from": "10",
                "to": "11",
                "showtooltip": "1",
                "color": "#F4191F",
                "tooltext": "<b>Shipping Details:</b>{br}Daily shipment: $label Units{br}Average shipping cost: $1.2"
              }
          ]
       }
    	},
    	events: {
      	"connectorClick": function() {
        	 alert("Test alert!");
      	}
   ...