• Edit
  • Download
  • <!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: {
                        bottomState: {
                          backgroundColor: 'red',
                          offsetX: 10,
                          offsetY: 10
                        }
                      }
                    },
                    zoomIn: {
                      tooltip: {
                        bottomState: {
                          backgroundColor: 'blue',
                          offsetX: 10,
                          offsetY: 10
                        }
                      }
                    }
                  }
                }
              }
            }]
          };
    
          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: {
                    bottomState: {
                      backgroundColor: 'red',
                      offsetX: 10,
                      offsetY: 10
                    }
                  }
                },
                zoomIn: {
                  tooltip: {
                    bottomState: {
                      backgroundColor: 'blue',
                      offsetX: 10,
                      offsetY: 10
                    }
                  }
                }
              }
            }
          }
        }]
      };
    
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: 400,
        width: '100%',
      });
    
    });