JSFiddle - React, Tailwind, and code Playground

by mram888

HTML

<html>
		<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
		ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>
	<body>
		<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
	</body>
</html>

CSS

.zc-ref {
  display: none;
}

JavaScript

zingchart.loadModules('maps,maps-bra', function(e) {

  var myConfig = {
    "title":{
      "text":"Brazil's 25 Most Populated Cities",
      "align":"left",
      "font-size":14
    },
    "shapes": [
      {
        "type": "zingchart.maps",
        "options":{
          "name": "bra",
          "offsetX":-50,
          "offsetY":35,
          "style":{
            "controls":{
              "placement": "br"
            },
            "background-color":'#4caf50',
            "label":{ 
              "visible":true,
              "font-size":8
            },
            "hover-state":{
              "visible":false
            },
            "tooltip":{
              "background-color":"#ff9800",
              "font-color":"#FFF",
              "font-size":18,
              "border-width":0
            },
            "items":{
              "_HB":{
                "background-color":"#00AE4D"
              }
            }
          }
        }
      }
    ]
  };

  // example format of data for cities
  var oCities = {
    'Sao Paulo':{
      latitude:-23.5505,
      longitude:-46.6333,
      name:'São Paulo',
      sPopulation:'11,895,893',
      iPopulation:11895893,
      x:0,
      y:0
    },
    'Rio de Janeiro':{
      latitude:-22.9068,
      longitude:-43.1729,
      name:'Rio de Janeiro',
      sPopulation:'6,453,682',
      iPopulation:6453682,
      x:0,
      y:0
    },
    'Salvador':{
      latitude:-12.9722,
      longitude:-38.5014,
      name:'Salvador',
      sPopulation:'2,902,927',
      iPopulation:2902927,
      x:0,
      y:0
    },
    'Brasilia':{
      latitude:-15.7942,
      longitude:-47.8822,
      name:'Brasília',
      sPopulation:'2,852,372',
      iPopulation:2852372,
      x:0,
      y:0
    },
    'Fortaleza':{
      latitude:-3.7319,
      longitude:-38.5267,
      name:'Fortaleza',
      sPopulation:'2,571,896',
      iPopulation:2571896,
      x:0,
      y:0
    },
    'Belo Horizonte':{
      latitude:-19.9245,
     ...