Click event not working with ApexCharts (Vue3)

Question

I need an event to be triggered whenever someone clicks on my chart or on one of the bars but for some reason events don't trigger for me.

This is my code:

<apexchart type="rangeBar" :options="chartOptions" class="ganttChart" :series="series"></apexchart>

And my setup:

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: {
                events: {
                    click: function(event, chartContext, config) {
                        alert(event, chartContext, config);
                    }
                },
              height: 400,
              width: 400,
              type: 'rangeBar',
              
            },
            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'
            },
            legend: {
              position: 'top'
            }
          };

         return { 
              series, chartOptions 
              }
    }

I've also tried using the dataPointSelection event but it did not have an effect.

Apart from the events, my chart shows and works just fine.

Answer 1

I also struggled a lot with it until I found something working. You can use @click like this:

<apexchart type="rangeBar" :options="chartOptions" class="ganttChart" :series="series" @click="clickHandler"></apexchart>

and then define clickHandler in your methods:

methods: {
    clickHandler(event, chartContext, config){
        console.log("click")
        console.log(event)
        console.log(chartContext)
        console.log(config)
    },

Answer 2

For those who use Vue api composition:

<apexchart type="rangeBar" @click="clickFunction"></apexchart>

Define a function inside "<script setup>"

function clickFunction(event, chartContext, config) {
   console.log('click', event, chartContext, config)
}