var options = {
  series: [
    {
      name: 'Compact',
      data: [
        [1.0, 52],
        [1.2, 49],
        [1.3, 47],
        [1.4, 50],
        [1.5, 45],
        [1.6, 44],
        [1.6, 48],
        [1.8, 42],
        [1.4, 46],
        [1.2, 51],
        [1.0, 50],
        [1.7, 43],
      ],
    },
    {
      name: 'Sedan',
      data: [
        [2.0, 38],
        [2.2, 35],
        [2.4, 34],
        [2.5, 32],
        [2.6, 33],
        [2.8, 29],
        [3.0, 27],
        [2.3, 36],
        [2.1, 37],
        [2.7, 30],
        [2.9, 28],
        [2.4, 31],
      ],
    },
    {
      name: 'SUV',
      data: [
        [3.2, 26],
        [3.5, 24],
        [3.8, 22],
        [4.0, 21],
        [4.2, 20],
        [4.5, 18],
        [4.8, 17],
        [5.0, 15],
        [3.6, 23],
        [4.1, 19],
        [3.4, 25],
        [4.6, 16],
      ],
    },
  ],
  chart: {
    height: 350,
    type: 'scatter',
    zoom: {
      enabled: true,
      type: 'xy',
    },
  },
  title: {
    text: 'Fuel Efficiency vs Engine Size',
  },
  xaxis: {
    tickAmount: 10,
    title: {
      text: 'Engine Size (L)',
    },
    labels: {
      formatter: function (val) {
        return parseFloat(val).toFixed(1)
      },
    },
  },
  yaxis: {
    tickAmount: 7,
    title: {
      text: 'Fuel Economy (mpg)',
    },
  },
  tooltip: {
    shared: false,
    intersect: true,
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()