How to call a function inside the Apexcharts Events with angular component?

Question

I am using apexcharts angular library for graphical representation of my data. I want to trigger another function when i click on the bar. This is my configuration for bar charts.

this.chartOptions = {
      series: [
        {
          name: "basic",
          data:[25,30,35,40]
        }
      ],
      chart: {
        type: "bar",
        height: 350,
        
        events: {
          click(event, chartContext, config) {
            console.log(config.seriesIndex);
            console.log(config.dataPointIndex);
            //this.getStates(config.dataPointIndex);
            var test: number = config.dataPointIndex;
            console.log(config.globals.labels[test]);
            this.getStates(test);
          }
        }
      },
      plotOptions: {
        bar: {
          horizontal: true
        }
      },
      dataLabels: {
        enabled: false
      },
      xaxis: {
        categories: ["India","Pakistan","USA","England"]
      }
    }

Here, getStates is a function that i want to trigger when i click on any bar in charts.

Can someone please reply how to call that function?

Answer 1

You could pass in an arrow function as the callback to preserve the meaning of this keyword.

chart: {
  type: "bar",
  height: 350,
  events: {
    click: (event: any, chartContext: any, config: any) => {
      this.getStates(config.dataPointIndex);

      console.log(config.seriesIndex);
      console.log(config.dataPointIndex);
      var test: number = config.dataPointIndex;
      console.log(config.globals.labels[test]);
      this.getStates(test);
    }
  }
}

You could find more info about the meaning of this keyword in callback here.