Selection-Tool all together

<!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></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: "scatter",
      backgroundColor: '#F7F7F7',
      title: {
        text: 'Points Along A Sin Wave'
      },
      plot: {
        _maxTrackers: 0,
        selectionMode: "none", // turn off normal selection   
        marker: {
          borderWidth: 0
        },
        selectedMarker: {
          size: 8,
          borderWidth: 1,
          borderColor: '#000',
        },
        hoverMarker: {
          size: 7
        },
        tooltip: {
          backgroundColor: '#FFF',
          fontColor: '#000',
          fontSize: 14,
          borderRadius: 4,
          borderWidth: 1,
          borderColor: '#000',
          text: '%t: %v',
          selectedState: {
            borderWidth: 2,
            fontSize: 16
          }
        }
      },
      plotarea: {
        margin: 'dynamic'
      },
      scaleX: {
        visible: false
      },
      scaleY: {
        minValue: -2,
        maxValue: 2,
        step: 1,
        guide: {
          visible: false
        },
        lineColor: '#90CAF9',
        lineWidth: 2,
        refLine: {
          lineColor: '#90CAF9',
          lineWidth: 2
        },
        item: {
          fontColor: '#90CAF9',
          fontSize: 14
        },
        tick: {
          lineColor: '#90CAF9'
        }
      },
      selectionTool: {
        mask: {
          borderWidth: 2,
          borderColor: "red",
          backgroundColor: "yellow",
          alpha: 0.5
        }
      },
      series: [{
          values: (function() {
            var aV = [];
            var len = 500;
            var x = 0;
            while (len--) {
              x = (Math.random() * 10).toFixed(3) - 0;
              aV.push([
                x,
                (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
              ]);
            }
            return aV;
          })(),
          backgroundColor: '#F48FB1',
          text: 'Sin Wave One',
          marker: {
            size: 5,
            alpha: .85,
            backgroundColor: '#F48FB1'
          }
        },
        {
          values: (function() {
            var aV = [];
            var len = 500;
            var x = 0;
            while (len--) {
              x = (Math.random() * 10).toFixed(3) - 0;
              aV.push([
                x,
                (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
              ]);
            }
            return aV;
          })(),
          backgroundColor: '#F48FB1',
          text: 'Sin Wave Two',
          marker: {
            size: 5,
            alpha: .85,
            backgroundColor: '#CE93D8'
          }
        }
      ]
    };

    // Load the selection-tool and render the chart once its loaded
    zingchart.loadModules('selection-tool', function() {
      zingchart.render({
        id: 'myChart',
        data: myConfig,
        height: 400,
        width: '100%',
        modules: 'selection-tool'
      });
    });
  </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>

var myConfig = {
  type: "scatter",
  backgroundColor: '#F7F7F7',
  title: {
    text: 'Points Along A Sin Wave'
  },
  plot: {
    _maxTrackers: 0,
    selectionMode: "none", // turn off normal selection   
    marker: {
      borderWidth: 0
    },
    selectedMarker: {
      size: 8,
      borderWidth: 1,
      borderColor: '#000',
    },
    hoverMarker: {
      size: 7
    },
    tooltip: {
      backgroundColor: '#FFF',
      fontColor: '#000',
      fontSize: 14,
      borderRadius: 4,
      borderWidth: 1,
      borderColor: '#000',
      text: '%t: %v',
      selectedState: {
        borderWidth: 2,
        fontSize: 16
      }
    }
  },
  plotarea: {
    margin: 'dynamic'
  },
  scaleX: {
    visible: false
  },
  scaleY: {
    minValue: -2,
    maxValue: 2,
    step: 1,
    guide: {
      visible: false
    },
    lineColor: '#90CAF9',
    lineWidth: 2,
    refLine: {
      lineColor: '#90CAF9',
      lineWidth: 2
    },
    item: {
      fontColor: '#90CAF9',
      fontSize: 14
    },
    tick: {
      lineColor: '#90CAF9'
    }
  },
  selectionTool: {
    mask: {
      borderWidth: 2,
      borderColor: "red",
      backgroundColor: "yellow",
      alpha: 0.5
    }
  },
  series: [{
      values: (function() {
        var aV = [];
        var len = 500;
        var x = 0;
        while (len--) {
          x = (Math.random() * 10).toFixed(3) - 0;
          aV.push([
            x,
            (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
          ]);
        }
        return aV;
      })(),
      backgroundColor: '#F48FB1',
      text: 'Sin Wave One',
      marker: {
        size: 5,
        alpha: .85,
        backgroundColor: '#F48FB1'
      }
    },
    {
      values: (function() {
        var aV = [];
        var len = 500;
        var x = 0;
        while (len--) {
          x = (Math.random() * 10).toFixed(3) - 0;
          aV.push([
            x,
            (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
          ]);
        }
        return aV;
      })(),
      backgroundColor: '#F48FB1',
      text: 'Sin Wave Two',
      marker: {
        size: 5,
        alpha: .85,
        backgroundColor: '#CE93D8'
      }
    }
  ]
};

// Load the selection-tool and render the chart once its loaded
zingchart.loadModules('selection-tool', function() {
  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: 400,
    width: '100%',
    modules: 'selection-tool'
  });
});