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

<script>
import VueApexCharts from 'vue-apexcharts'

// This demo also loads: https://apexcharts.com/samples/assets/styles.css

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          name: 'Messenger',
          data: [
            [16.4, 5.4],
            [21.7, 4],
            [25.4, 3],
            [19, 2],
            [10.9, 1],
            [13.6, 3.2],
            [10.9, 7],
            [10.9, 8.2],
            [16.4, 4],
            [13.6, 4.3],
            [13.6, 12],
            [29.9, 3],
            [10.9, 5.2],
            [16.4, 6.5],
            [10.9, 8],
            [24.5, 7.1],
            [10.9, 7],
            [8.1, 4.7],
            [19, 10],
            [27.1, 10],
            [24.5, 8],
            [27.1, 3],
            [29.9, 11.5],
            [27.1, 0.8],
            [22.1, 2],
          ],
        },
        {
          name: 'Instagram',
          data: [
            [6.4, 5.4],
            [11.7, 4],
            [15.4, 3],
            [9, 2],
            [10.9, 11],
            [20.9, 7],
            [12.9, 8.2],
            [6.4, 14],
            [11.6, 12],
            [18.2, 9],
            [22.5, 5.5],
            [25.1, 8],
            [14.3, 6],
            [8.7, 9.5],
            [17.6, 13],
            [23.8, 11],
            [28.4, 6.5],
            [30.9, 9],
            [26.2, 4],
            [19.5, 2.5],
            [13.1, 10.5],
            [21.4, 12.5],
            [16.8, 4.8],
            [29.7, 12],
            [24.3, 7.8],
          ],
        },
      ],
      chartOptions: {
        chart: {
          height: 350,
          type: 'scatter',
          animations: {
            enabled: false,
          },
          zoom: {
            enabled: false,
          },
          toolbar: {
            show: false,
          },
        },
        colors: ['#056BF6', '#D2376A'],
        xaxis: {
          tickAmount: 10,
          min: 0,
          max: 40,
        },
        yaxis: {
          tickAmount: 7,
        },
        markers: {
          size: 20,
        },
        fill: {
          type: 'image',
          opacity: 1,
          image: {
            src: [
              '../../assets/images/ico-messenger.png',
              '../../assets/images/ico-instagram.png',
            ],
            width: 40,
            height: 40,
          },
        },
        legend: {
          labels: {
            useSeriesColors: true,
          },
          markers: {
            customHTML: [
              function () {
                return '<img src="../../assets/images/ico-messenger.png" width="16" height="16" />'
              },
              function () {
                return '<img src="../../assets/images/ico-instagram.png" width="16" height="16" />'
              },
            ],
          },
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 650px;
  margin: 35px auto;
}
.apexcharts-legend {
  overflow: hidden !important;
  min-height: 17px;
}
.apexcharts-legend-marker {
  background: none !important;
  margin-right: 7px !important;
}
.apexcharts-legend-series {
  align-items: flex-start !important;
}
</style>