ApexCharts events not working with vue3

[melinajj]

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.

[jonesopolis]

Running into the same issue. I can listen to the vue @click event on the entire graph, but nothing that gives me context where the user clicks.

[JochemFB]

Same issue here. Click, and even mousMove events are not working

[neil585456525]

Its already turn into emit, so you can just use like @dataPointSelection instead.

[chrisjkellett]

the solution that @sam585456525 gives is a good workaround imo.

[ajkaeser]

@sam585456525 I'm confused about what you are saying to do, could you please give us an example?

[neil585456525]

@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 !

[ajkaeser]

Thanks for the explanation.

[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" />

[nielsswinkels]

So is this a bug, or should it be added to documentation somewhere?

I was stuck trying to do it the way the documentation says. It could be added to the readme of this repo?

[dawadam]

Any news ?
Events can be great. :)

[prherranz]

I would also be very interested in what the current situation is and how events should be used on VUE3

[Lukasss93]

bump

[albizeka]

has anyone solved this, or we are still waiting for this to be solved?