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

Issue

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();

Solution

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.

Answered By - junedchhipa

Answer Checked By - David Marino (PHPFixing Volunteer)