ApexCharts events not working with vue3

I’ve been trying to fire an event whenever someone clicks somewhere on the chart but I’ve been unable to do it with a vue3 project setup. My charts are showing fine but firing events does not work.

I’ve used the following code:

<apexchart type="rangeBar" width="500px" :options="chartOptions" :series="series"></apexchart>

setup() {
    const series = [
            {
              name: 'Sunny',
              data: [
                {
                  x: 'Weather',
                  y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-08').getTime()
                  ]
                },
              ]
            },
            {
              name: 'Rainy',
              data: [
                {
                  x: 'Weather',
                  y: [
                    new Date('2019-03-02').getTime(),
                    new Date('2019-03-05').getTime()
                  ]
                },
              ]
            }
          ];

  const chartOptions = {
            chart: {
              height: 800,
              width: 800,
              type: 'rangeBar',
              events: {
                    click(event, chartContext, config) {
                        alert(event, chartContext, config);
                    }
                },  
              
            },
            plotOptions: {
              bar: {
                horizontal: true
              }
            },
            
            fill: {
              type: 'gradient',
              gradient: {
                shade: 'light',
                type: 'vertical',
                shadeIntensity: 0.25,
                gradientToColors: undefined,
                inverseColors: true,
                opacityFrom: 1,
                opacityTo: 1,
                stops: [50, 0, 100, 100]
              }
            },
            xaxis: {
              type: 'datetime'
            },
            title: {
              text: "Scene Viewer",
              align: "center",
              style: {
                fontSize: "15px"
              }
            },
            legend: {
              position: 'top'
            }
          };

        const options = {
        chart: {
          id: 'vuechart-example',
          events: {
                    click(event, chartContext, config) {
                        alert(event, chartContext, config);
                        console.log("wqewqeqeqweq")
                        alert("qwewqeqeqe")
                    }
                },  
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
        }
      }
  }

Is anyone else having issues with events? Am I missing a piece of configuration? Any help would be greatly appreciated.

[sam585456525]

@ajkaeser

Here are all emits https://github.com/apexcharts/vue3-apexcharts/blob/main/src/vue3-apexcharts.js

It is a wrapper to original ApexCharts events !

[ijcnvv]

there is no actual info about events in docs, but you should subscribe on events on component like <apex-chart :options="options" :series="series" @markerClick="handleClick" />