• 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: {
                      mediaRules: [{
                        maxWidth: 400,
                        backgroundColor: 'red',
                        fontColor: 'blue',
                      }],
                    },
                    zoomIn: {
                      mediaRules: [{
                          maxWidth: 400,
                          backgroundColor: 'red',
                          fontColor: 'blue',
                        },
                      }]
                  }
                }
              }
            }]
          };
    
          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: {
                  mediaRules: [{
                    maxWidth: 400,
                    backgroundColor: 'red',
                    fontColor: 'blue',
                  }],
                },
                zoomIn: {
                  mediaRules: [{
                      maxWidth: 400,
                      backgroundColor: 'red',
                      fontColor: 'blue',
                    },
                  }]
              }
            }
          }
        }]
      };
    
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: 400,
        width: '100%',
      });
    
    });