hooking labels to maps

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>


  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <button onClick="showLog();">getLonLat()</button>
  <a href="#" onclick="clearlog();return false;">Clear Log</a>
  <pre id='eventlog'></pre>
  <br>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    zingchart.THEME = "classic";

    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    zingchart.loadModules("maps,maps-world-countries");

    var chartData = {
      "graphset": [{
        "background-color": "#fff",
        "labels": [{
          "text": "Hooked Label",
          "hook": "node:plot=0;index=6",
          "border-width": 1,
          "background-color": "white",
          "callout": 1,
          "offset-y": "-30%"
        }],
        "shapes": [{
            "type": "zingchart.maps",
            "options": {
              "id": "map",
              "groups": ["AFRICA"],
              "name": "world.countries",
              "scale": true,
              "style": {
                "items": {
                  "ZAF": {
                    "background-color": "#C30",
                    "tooltip": {
                      "text": "This is a tooltip for South Africa"
                    },
                    "hover-state": {
                      "background-color": "#F30"
                    }
                  },
                  "DZA": {
                    "background-color": "#7CA82B",
                    "tooltip": {
                      "text": "This is a tooltip for Algeria"
                    },
                    "hover-state": {
                      "background-color": "#0C3"
                    }
                  }
                }
              }
            }
          },
          {
            "type": "circle",
            "size": 75,
            "x": "2.5525lon",
            "y": "28.2072lat",
            "map": "map",
            "background-color": "#89ab57",
            "border-width": 20,
            "border-color": "#5297b6"
          }
        ]
      }]
    }

    window.clearlog = function clearlog() {
      document.getElementById('eventlog').innerText = '';
    };

    window.showLog = function() {
      var myLog = document.getElementById('eventlog');
      //myLog.innerText = JSON.stringify(zingchart.maps.getLonLat('world.countries', [500,500]));
      myLog.innerText = JSON.stringify(zingchart.maps.getItemInfo('world.countries', 'DZA'));
      //myLog.innerText = JSON.stringify(zingchart.maps.getItems('world.countries'));
    };

    zingchart.render({
      id: "myChart",
      data: chartData,
      height: "100%",
      width: "100%"
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>


  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <button onClick="showLog();">getLonLat()</button>
  <a href="#" onclick="clearlog();return false;">Clear Log</a>
  <pre id='eventlog'></pre>
  <br>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

zingchart.THEME = "classic";

zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
zingchart.loadModules("maps,maps-world-countries");

var chartData = {
  "graphset": [{
    "background-color": "#fff",
    "labels": [{
      "text": "Hooked Label",
      "hook": "node:plot=0;index=6",
      "border-width": 1,
      "background-color": "white",
      "callout": 1,
      "offset-y": "-30%"
    }],
    "shapes": [{
        "type": "zingchart.maps",
        "options": {
          "id": "map",
          "groups": ["AFRICA"],
          "name": "world.countries",
          "scale": true,
          "style": {
            "items": {
              "ZAF": {
                "background-color": "#C30",
                "tooltip": {
                  "text": "This is a tooltip for South Africa"
                },
                "hover-state": {
                  "background-color": "#F30"
                }
              },
              "DZA": {
                "background-color": "#7CA82B",
                "tooltip": {
                  "text": "This is a tooltip for Algeria"
                },
                "hover-state": {
                  "background-color": "#0C3"
                }
              }
            }
          }
        }
      },
      {
        "type": "circle",
        "size": 75,
        "x": "2.5525lon",
        "y": "28.2072lat",
        "map": "map",
        "background-color": "#89ab57",
        "border-width": 20,
        "border-color": "#5297b6"
      }
    ]
  }]
}

window.clearlog = function clearlog() {
  document.getElementById('eventlog').innerText = '';
};

window.showLog = function() {
  var myLog = document.getElementById('eventlog');
  //myLog.innerText = JSON.stringify(zingchart.maps.getLonLat('world.countries', [500,500]));
  myLog.innerText = JSON.stringify(zingchart.maps.getItemInfo('world.countries', 'DZA'));
  //myLog.innerText = JSON.stringify(zingchart.maps.getItems('world.countries'));
};

zingchart.render({
  id: "myChart",
  data: chartData,
  height: "100%",
  width: "100%"
});