[json] graphset > shapes > ... > zoomIn/Out > tooltip > calloutTip

<!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,
    #myChart {
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    zingchart.loadModules('maps, maps-usa_ak', function(e) {

      let chartConfig = {
        shapes: [{
          type: 'zingchart.maps',
          options: {
            name: 'usa_ak',
            zooming: false,
            panning: false,
            scrolling: false,
            style: {
              controls: {
                placement: 'tr',
                zoomOut: {
                  tooltip: {
                    callout: true,
                    calloutHeight: 15,
                    calloutPosition: 'bottom',
                    calloutWidth: 0,
                    calloutTip: {
                      type: 'circle',
                      backgroundColor: '#fff',
                      borderWidth: 2,
                      borderColor: '#f60',
                      offsetY: 5,
                      size: 5,
                    },
                  }
                },
                zoomIn: {
                  tooltip: {
                    callout: true,
                    calloutHeight: 15,
                    calloutPosition: 'bottom',
                    calloutWidth: 0,
                    calloutTip: {
                      type: 'circle',
                      backgroundColor: '#fff',
                      borderWidth: 2,
                      borderColor: '#f60',
                      offsetY: 5,
                      size: 5,
                    },
                  }
                }
              }
            }
          }
        }]
      };

      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: 400,
        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>
  <div id='myChart'></div>
</body>

</html>

html,
body,
#myChart {
  height: 100%;
  width: 100%;
}

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

  let chartConfig = {
    shapes: [{
      type: 'zingchart.maps',
      options: {
        name: 'usa_ak',
        zooming: false,
        panning: false,
        scrolling: false,
        style: {
          controls: {
            placement: 'tr',
            zoomOut: {
              tooltip: {
                callout: true,
                calloutHeight: 15,
                calloutPosition: 'bottom',
                calloutWidth: 0,
                calloutTip: {
                  type: 'circle',
                  backgroundColor: '#fff',
                  borderWidth: 2,
                  borderColor: '#f60',
                  offsetY: 5,
                  size: 5,
                },
              }
            },
            zoomIn: {
              tooltip: {
                callout: true,
                calloutHeight: 15,
                calloutPosition: 'bottom',
                calloutWidth: 0,
                calloutTip: {
                  type: 'circle',
                  backgroundColor: '#fff',
                  borderWidth: 2,
                  borderColor: '#f60',
                  offsetY: 5,
                  size: 5,
                },
              }
            }
          }
        }
      }
    }]
  };

  zingchart.render({
    id: 'myChart',
    data: chartConfig,
    height: 400,
    width: '100%',
  });

});