Return value from dataPointSelection event in Apexcharts

Question

I have a question related to this question and this answer but they don't solve my question completely. I'm using vue and apexcharts and I would like to return a value or update a variable from an event. Is it possible to return something instead of printing it in the console?

Something like this:

    events: {
        dataPointSelection: function (event, chartContext, config) {
            this.active = this.series[config.seriesIndex];
        }
    }

The problem that I face is that "this" makes reference to the overall vue component and therefore "series" and "active" cannot be found.

Here is the code that gives me"TypeError: this.series is undefined" when I click on a point data. The series data I get from the parent component and it looks like this:

[{"name":"S-1","data":[[2.65,100], [6.67,100]]}, {"name":"S-2","data":[[0,50],[2.65,50]]}]

<script>
  import VueApexCharts from 'vue-apexcharts';

  export default {
    name: "myGraph",
    components: {
      apexchart: VueApexCharts,
    },
    props: {
      series: {}
    },
    data: () => ({
        active: undefined,
        chartOptions: {
          chart: {
            width: '100%',
            animations: {
              enabled: false
            },
            events: {
              dataPointSelection: function (event, chartContext, config) {
                this.active = this.series[config.seriesIndex];
              }
            }
          },
          tooltip: {
            intersect: true,
            shared: false
          },
          markers: {size: 1},
      }
    }),
   }
 }
</script>

The idea is that on dataPointSelection, it should activate that serie in order to access later on other information that will be store in that object.

score 4 · Accepted Answer · answered Mar 27 '19 at 18:15

The easiest way is to bind the event directly in the component

<apexchart type="bar" @dataPointSelection="dataPointSelectionHandler"></apexchart>

methods: {
  dataPointSelectionHandler(e, chartContext, config) {
    console.log(chartContext, config)
  }
}

Another way is to use ES6 arrow functions in your chart configuration

computed: {
  chartOptions: function() {
    return {
      chart: {
        events: {
          dataPointSelection: (e, chart, opts) => {
            // you can call Vue methods now as "this" will point to the Vue instance when you use ES6 arrow function
            this.VueDemoMethod();
          }
        }
      },
    }
  }
}

Francesco Orsi · Answer 2 · 2021-02-12T15:04:56.593

I think this is simply what you are looking for

chart: {
    type: 'area',
    events: {
        dataPointSelection(event, chartContext, config) {
            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
        }
    }
}

if you need by the click, this is better

chart: {
    type: 'area',
    events: {
        click(event, chartContext, config) {
            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
        }
    }
}

source How to access value on dataPointSelection function of Apexchart

documentation events https://apexcharts.com/docs/options/chart/events/

Return value from dataPointSelection event in Apexcharts

2 Answers2

Linked