How to call methods from options in ApexChart using vue.js

Question

I'm new to vue and apex charts, basically what I need is to call a method from an apex chart option, 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 suggestions?

P粉662089521 · Answer

You can put chartOptions in the method instead of the data. Below is the working code

const currencyValue = (val) => {
  return "R$" + val;
}

new Vue({
  el: "#app",
  data() {
    return {
      series: [450, 300, 500]
    }
  },
  methods: {
    chartOptions() {
      return {
        labels: ['Paid', 'Pending', 'Rejected'],
        plotOptions: {
            radialBar: {
                size: 165,
                offsetY: 30,
                hollow: {
                    size: '20%'
                },
                track: {
                    background: "#ebebeb",
                    strokeWidth: '100%',
                    margin: 15,
                },
                dataLabels: {
                    show: true,
                    name: {
                        fontSize: '18px',
                    },
                    value: {
                        fontSize: '16px',
                        color: "#636a71",
                        offsetY: 11
                    },
                    total: {
                        show: true,
                        label: 'Total',
                        formatter: function() {
                            return 42459
                        }
                    }
                }
            },
        },
        responsive: [{
            breakpoint: 576,
            options: {
                plotOptions: {
                    radialBar: {
                        size: 150,
                        hollow: {
                            size: '20%'
                        },
                        track: {
                            background: "#ebebeb",
                            strokeWidth: '100%',
                            margin: 15,
                        },
                    }
                }
            }
        }],
        colors: ['#7961F9', '#FF9F43', '#EA5455'],
        fill: {
            type: 'gradient',
            gradient: {
                // enabled: true,
                shade: 'dark',
                type: 'vertical',
                shadeIntensity: 0.5,
                gradientToColors: ['#9c8cfc', '#FFC085', '#f29292'],
                inverseColors: false,
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100]
            },
        },
        stroke: {
            lineCap: 'round'
        },
        chart: {
            dropShadow: {
                enabled: true,
                blur: 3,
                left: 1,
                top: 1,
                opacity: 0.1
            },
        },
        tooltip: {
          x: {
            formatter: function (val) {
              return val;
            },
          },
          y: {
            formatter: function (val) {
              return currencyValue(val);
            },
          },
        },            
      }
    }
  },
  components: {
    VueApexCharts
  }
})

Methods cannot be called in data or compulated, but can be called in methods

One thing that needs to be modified is as follows

P粉078945182 · Answer

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

The solution is to use arrow functions to bind the component instance as 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)
          },
        },
      }
    }
  }
}