<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>

<div id="apex-scatter-chart"></div>

<script>
  var chart = new ApexCharts(
    document.querySelector('#apex-scatter-chart'), {
      chart: { 
        height: 350, 
        type: 'scatter', 
        zoom: { 
          enabled: true, 
          type: 'xy' 
        }
      },
      colors: [app.color.blue, app.color.orange, app.color.success],
      series: [
        { name: "SAMPLE A", data: [ [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0] ] }, 
        { name: "SAMPLE B", data: [ [36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10] ] }, 
        { name: "SAMPLE C", data: [ [21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3] ] }
      ],
      xaxis: {
        tickAmount: 10,
        labels: {
          formatter: function(val) { 
            return parseFloat(val).toFixed(1)
          }
        }
      },
      yaxis: { tickAmount: 7 }
    }
  );

  chart.render();
</script>