How can I call a method from options of ApexChart with vue.js

Question

I'm new with vue and apex charts, basically what I need is to call a method from the apex chart options, I created a file showing the problem I'm having:

https://jsfiddle.net/wr3uo5va/

I need to call the method currencyValue from chartOptions.dataLabels

    dataLabels: {
      enabled: true,
      offsetX: -25,
      formatter: function(val) {
        return val + " Reais";  <--- This works
       // return this.currencyValue(val)  <--- This does not work
      },
    },

Any suggestion ?

Answer 1

The problem is this inside the formatter callback is the chart instance (not the component instance) because it's declared as a regular function.

The solution is to use an arrow function to bind the component instance as the context:

export default {
  methods: {
    currencyValue(value) {⋯},

    loadChartData() {
      ⋮
      this.chartOptions = {
        ⋮
        dataLabels: {
          ⋮
          // ❌ don't use regular function here
          //formatter: function(val) {
          //  return this.currencyValue(val)
          //},

          // ✅
          formatter: (val) => {
            return this.currencyValue(val)
          },
        },
      }
    }
  }
}

updated fiddle