How To Use Events on vue3-apexcharts

If you are stuck to use events on vue3-apexcharts, this article is useful to you.

<template>
  <apexchart
    v-if="options && series"
    type="line"
    height="350" 
    :options="options"
    :series="series"
    @click="click"
    @legendClick="legendClick"
    @markerClick="markerClick"
    @selection="selection"
    @dataPointSelection="dataPointSelection"
  >
  </apexchart>
</template>
<script>
export default {
  data() {
    return {
      options: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: [1991, 1992, 1993],
        },
      },
      series: [
        {
          name: 'series-1',
          data: [30, 40, 45],
        },
      ],
    };
  },
  methods: {
    click(event, chartContext, config) {    
      console.log('click', event, chartContext, config);
    },
    legendClick(chartContext, seriesIndex, config) {
      console.log('legendClick', chartContext, seriesIndex, config);
    },
    markerClick(event, chartContext, { seriesIndex, dataPointIndex, config }) {
      console.log('markerClick', event, chartContext, seriesIndex, dataPointIndex, config);
    },
    selection(chartContext, { xaxis, yaxis }) {
      console.log('selection', chartContext, xaxis, yaxis);
    },
    dataPointSelection(event, chartContext, config) {
      console.log('dataPointSelection', event, chartContext, config);
    },
  },
};