Sine Wave with Selection Tool

<!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>
    .zc-body {
      background-color: #F7F7F7;
    }

    .chart--container {
      width: 100%;
      height: 100%;
      min-height: 530px;
    }

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

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: "scatter",
      backgroundColor: '#F7F7F7',
      title: {
        text: 'Points Along A Sine Wave'
      },
      plot: {
        selectionMode: "none", // turn off normal selection   
        marker: {
          borderWidth: 0
        },
        selectedMarker: {
          size: '9px',
          borderWidth: '1px',
          borderColor: '#000',
        },
        hoverMarker: {
          size: '7px'
        },
        tooltip: {
          text: '%t: %v',
          backgroundColor: '#FFF',
          borderColor: '#000',
          borderRadius: '4px',
          borderWidth: '1px',
          fontColor: '#000',
          fontSize: '14px'
        }
      },
      plotarea: {
        margin: 'dynamic'
      },
      scaleX: {
        visible: false
      },
      scaleY: {
        minValue: -2,
        maxValue: 2,
        step: 1,
        guide: {
          visible: false
        },
        lineColor: '#90CAF9',
        lineWidth: '2px',
        refLine: {
          lineColor: '#90CAF9',
          lineWidth: '2px'
        },
        item: {
          fontColor: '#90CAF9',
          fontSize: '14px'
        },
        tick: {
          lineColor: '#90CAF9'
        }
      },
      selectionTool: {
        mask: {
          alpha: 0.5,
          backgroundColor: "yellow",
          borderColor: "red",
          borderWidth: '2px'
        }
      },
      series: [{
          values: (function() {
            let aV = [];
            let len = 500;
            let 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() {
            let aV = [];
            let len = 500;
            let 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: chartConfig,
        height: '100%',
        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" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

.zc-body {
  background-color: #F7F7F7;
}

.chart--container {
  width: 100%;
  height: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

let chartConfig = {
  type: "scatter",
  backgroundColor: '#F7F7F7',
  title: {
    text: 'Points Along A Sine Wave'
  },
  plot: {
    selectionMode: "none", // turn off normal selection   
    marker: {
      borderWidth: 0
    },
    selectedMarker: {
      size: '9px',
      borderWidth: '1px',
      borderColor: '#000',
    },
    hoverMarker: {
      size: '7px'
    },
    tooltip: {
      text: '%t: %v',
      backgroundColor: '#FFF',
      borderColor: '#000',
      borderRadius: '4px',
      borderWidth: '1px',
      fontColor: '#000',
      fontSize: '14px'
    }
  },
  plotarea: {
    margin: 'dynamic'
  },
  scaleX: {
    visible: false
  },
  scaleY: {
    minValue: -2,
    maxValue: 2,
    step: 1,
    guide: {
      visible: false
    },
    lineColor: '#90CAF9',
    lineWidth: '2px',
    refLine: {
      lineColor: '#90CAF9',
      lineWidth: '2px'
    },
    item: {
      fontColor: '#90CAF9',
      fontSize: '14px'
    },
    tick: {
      lineColor: '#90CAF9'
    }
  },
  selectionTool: {
    mask: {
      alpha: 0.5,
      backgroundColor: "yellow",
      borderColor: "red",
      borderWidth: '2px'
    }
  },
  series: [{
      values: (function() {
        let aV = [];
        let len = 500;
        let 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() {
        let aV = [];
        let len = 500;
        let 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: chartConfig,
    height: '100%',
    width: '100%',
    modules: 'selection-tool'
  });
});