Apexchart tooltip

Question

I'm trying to add % in my Apexcharts tooltip after the Y value. I'm using vue.js which apexchart does not provide an official documentation for. But I got it to work properly. Here is what I have so far:

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

  // this is the code that handles the chart, there is no official documentation for apexcharts with vue.js but there is with javascript
  //https://apexcharts.com/docs/installation/
  methods: {
      init: function() {
            this.apex = new ApexCharts(this.$refs.barchart, {
            chart: {
                type: 'line',//defines the type of chart
                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,   //thickness of the lines
                curve: 'smooth'//roundness of the lines
            },
            series: [{
                name: this.bar1name,
                data: [28 , 29, 33, 30, 26, this.bar1number2, this.bar1number1]//the last 2 variables are tied to the bars, try changing the variable above at their source
                },
                {
                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],    //line color   
            markers: {
                colors: [this.chart1color, this.chart2color, this.chart3color,this.chart4color,this.chart5color,this.chart6color], //dot color
                hover:{size:6} //dot size
            },
            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,//sets the max to the y axis
            },
            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();//mounted makes the chart apear 
  },
  updated() {
      this.init();//updated updates the chart after every change
  }
}

i tried using the formatter to change the outcome like this but it doesnt seem to work.

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

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

any help or references is greatly appreciated, thank you.

also stack wont let me post a new tag for apex charts so heres the official documentation. Apexcharts

Answer 1

Seems like you have mixed the options for yaxis with tooltip label formatter property.

Try the following code

tooltip: {
  x: {
    format: 'dd MMM',
    formatter: undefined,
  },
  y: {
    formatter: (value) => { return value + "%" },
  },              
}

Also, there is vue.js wrapper available for ApexCharts which you can use.

https://github.com/apexcharts/vue-apexcharts