How to return only value in pie on apexcharts.js won't convert percent

Question

I'm developing a website for a society and I am using apexCharts.js, I want to show a simple pie chart but when I display this, the value on dataLabel is a percent. I don't want to convert them into values, of course the true value is display when we hover the pie chart.

I have already read the documentation and searched on datalabels options. The way I think is:

formatter: function(val) { return val }

but it does not work... So I did not find an example neither on github nor here solving the issue.

Below my script :

var options = {
  chart: {
    width: 650,
    type: 'pie',
  },
  labels: ['Date formation',
    'Date formation 1',
    'Date formation 2',
    'Date formation 3',
    'Nombre de jours restant ',
    'Nombre de formations restantes'
  ],
  series: [202, 80, 62, 250, 52, 30],
  /* this portion NEED custom ???? */
  formatter: function (val) {
    return val
  },
  title: {
    text: "Jours de formation produits ou plannifiés"
  },
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200
      },
      legend: {
        position: 'center'
      }
    }
  }]
}
var chart = new ApexCharts(
  document.querySelector("#chart"),
  options);
chart.render();

Method

Answer 1

The formatter property needs to be nested inside dataLabels property. Like this:

    var options = {
      chart: {
        width: 650,
        type: 'pie',
      },
      labels: ['Date formation',
        'Date formation 1',
        'Date formation 2',
        'Date formation 3',
        'Nombre de jours restant ',
        'Nombre de formations restantes'
      ],
      series: [202, 80, 62, 250, 52, 30],
      dataLabels: {
        formatter: function (val, opts) {
            return opts.w.config.series[opts.seriesIndex]
        },
      },
    }

    var chart = new ApexCharts(
      document.querySelector("#chart"),
      options);
    chart.render();

You will be able to get the default values of the series in the 2nd param (opts) of formatter function. You can use that param and get the original value instead of percentage.

Karyolysis

Answer 2

Its simple here is the code-->

            options={{
              dataLabels: {
                formatter: function (val) {
                  const percent = (val/1);
                  return percent.toFixed(0)
                },
              },

Kurtiskurtosis

This is wrong. The value val which is passed is already the percentage (just without the %). – Radiothorium

Answer 3

Just wanted to add to @junedchhipa 's answer that if you want to display both the raw value and the percentage you can try :

  dataLabels: {
    formatter: function (val, opts) {
        return [opts.w.config.series[opts.seriesIndex],val+'%']
    },
  },

Radiothorium