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?

[chrisjkellett]

see the answer here https://github.com/apexcharts/vue3-apexcharts/issues/20#issuecomment-881142984 - it is a good solution. i use this approach when reacting to events from apex. can't say i have tried to put them directly in the options as per the docs.

[KentuckyMC]

We're facing some event problems here as well. These emits are working fine for our bar charts, but how will they work on our pie charts? I can't get them to work with the @click events. Seems like the @dataPointSelection is working, but only when I click inside the legend from the pie charts. Any ideas how to get these working?

[chrisjkellett]

have you tried using vue devtools event timeline to see what apex is emitting?

[KentuckyMC]

Got the solution. It was an issue with another library. We're using SwiperJS for having some swipercards on the application. But because of this, the click events inside those swipercards didn't fire. The bar chart I was talking about, wasn't inside this swiper component. For the ones having this issue, using :touchStartPreventDefault="false" on the swipercard solves my issue.

[maximran800]

For anyone wondering how to get the data we clicked when we click the chart using dataPointSelection, from the config, we can get config.dataPointIndex, which should net us the index number. Together with our series for that chart, we can know which chart is press.

eg

<apexchart class="apex-charts" height="300" :series="series"
  :options="chartOptions" @dataPointSelection="onClickPie"></apexchart>

// others code
const onClickPie = (event, chartContext, config) => {
         console.log(series.value[config.dataPointIndex]);
          //do stuff
};

get idea from this website https://samchowdhury.medium.com/how-do-you-make-a-bar-chart-clickable-in-apex-chart-with-vue-js-3ab3e0730e94