I need to include % in my Apexcharts tooltip after the Y value. Working with vue.js and without official documentation from apexchart, I managed to make it function correctly. This is what I have accomplished so far:

data: function () {
    return {
      apex: null
    }
  },

  // Code handling the chart without official vue.js documentation for apexcharts, but there's javascript documentation available
  //https://apexcharts.com/docs/installation/
  methods: {
      init: function() {
            this.apex = new ApexCharts(this.$refs.barchart, {
            chart: {
                type: 'line',
                height:400,
                animations: {
                    enabled: true,
                    easing: 'easeinout',
                    speed: 800,
                    animateGradually: {
                        enabled: true,
                        delay: 50
                    },
                    dynamicAnimation: {
                        enabled: true,
                        speed: 800
                    }
                },
                toolbar: {
                    show: true,
                    tools: {
                        download: true,
                        selection: false,
                        zoom: false,
                        zoomin: true,
                        zoomout: true,
                        pan: true,
                        reset: true
                    },
                    autoSelected: 'zoom' 
                },
            },
            stroke: {
                width: 3,
                curve: 'smooth'
            },
            series: [{
                name: this.bar1name,
                data: [28 , 29, 33, 30, 26, this.bar1number2, this.bar1number1]
                },
                {
                name: this.bar2name,
                data: [12, 11, 14, 26, 28, this.bar2number2, this.bar2number1]
                },
                {
                name: this.bar3name,
                data: [32, 41, 40, 44, 47, this.bar3number2, this.bar3number1]
                },
                {
                name: this.bar4name,
                data: [48, 41, 33, 37, 35, this.bar4number2, this.bar4number1]
                },
                {
                name: this.bar5name,
                data: [52, 56, 60, 54, 52, this.bar5number2, this.bar5number1]
                },
                {
                name: this.bar6name,
                data: [32, 27, 38, 48, 30, this.bar6number2, this.bar6number1]
            }],
            colors:[this.chart1color, this.chart2color, this.chart3color,this.chart4color,this.chart5color,this.chart6color],    
            markers: {
                colors: [this.chart1color, this.chart2color, this.chart3color,this.chart4color,this.chart5color,this.chart6color],
                hover:{size:6}
            },
            xaxis: {
                type:'datetime',
                categories: ['Jan 2018', 'Feb 2018', 'Mar 2018', 'Apr 2018', 'May 2018', 'Jun 2018', 'Jul 2018'],
                axisTicks: {
                    show: true,
                    borderType: 'solid',
                    color: '#78909C',
                    height: 6,
                },
            }, 
            yaxis: {
                tickAmount: 5,
                min: 0,
                max: 100,
            },
            grid: {
                show: true,
                borderColor: '#e8e8e8',
                strokeDashArray: 0,
                position: 'back',
                xaxis: {
                    lines: {
                        show: true,
                        offsetX: 10,
                        offsetY: 10,
                    }
                },   
                yaxis: {
                    lines: {
                        show: true,
                        offsetX: 10,
                        offsetY: 10
                    },
                    tickAmount: 6,
                    min: 0,
                    max: 100,
                },  
                padding: {
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0
                },  

            },
            tooltip: {
                enabled: true,
                followCursor: true,
                x: {
                    format: 'dd MMM',
                    formatter: undefined,
                },

                yaxis: {
                    labels: {
                        formatter: (value) => { return val + "%" },
                    },
                },

            },  

            }).render()
      }
  },
mounted() {
      this.init();
  },
  updated() {
      this.init();
  }
}

I attempted using the formatter to modify the outcome as follows, but it wasn't successful.

tooltip: {
      enabled: true,
      followCursor: true,
      x: {
          format: 'dd MMM',
          formatter: undefined,
      },

      yaxis: {
          labels: {
              formatter: (value) => { return val + "%" },
          },
      },              
  },

Any assistance or references would be greatly appreciated. Thank you.

Since Stack won't allow me to add a new tag for apex charts, here's the official documentation link: Apexcharts