'VUE3 dataLabels stacked column apex chart

I want show only top total datalabels but is dublicate label

enter image description here

dataLabels: {
    enabled: true,
    offsetY: -20,
    style: {
      fontSize: "12px",
      colors: ["#304758"],
    },

    formatter: function (value, { seriesIndex, dataPointIndex, w }) {
      return w.globals.stackedSeriesTotals[dataPointIndex];

    },
  },
vue.jsvuejs3apexcharts


Solution 1:[1]

Here is formatter I come up with, should work for any number of series

formatter: function (value, { seriesIndex, dataPointIndex, w }) {
  let numberOfSeries = w.config.series.length - 1
  if(seriesIndex == numberOfSeries){
    return w.globals.stackedSeriesTotals[dataPointIndex];
  } else if (seriesIndex<numberOfSeries){
    let sum = 0
    while (seriesIndex < numberOfSeries) {
      seriesIndex++;
      sum+= w.config.series[seriesIndex].data[dataPointIndex] || 0
    }
    if (sum === 0) return w.globals.stackedSeriesTotals[dataPointIndex];
  }
},

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Patryk Laszuk

Related Questions