JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">
</div>

CSS

#chart {
  max-width: 650px;
  margin: 35px auto;
}

JavaScript

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "scatter",
  },
  series: [
    {
      name: "Series 1",
      data: [
        {
          x: 100,
          y: 50,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 150,
          y: 55,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 130,
          y: 44,
          product: 'name',
          info: 'info',
          site: 'name'
        }
      ]
    }
  ],
  xaxis: {
    type: "numeric"
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();