<template>
  <div>
    <div id="chart">
      <apexchart
        type="scatter"
        height="350"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      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],
          ],
        },
      ],
      chartOptions: {
        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,
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 650px;
  margin: 35px auto;
}
</style>