Apexcharts.js: [Feature Request] Total Data label in stacked column

[jeroenpol]

Hi!

I got two questions:

1. How can I show the sum of the data as a data label in a stacked column chart. For instance, both data labels should be 71 in the example below.

2. How can I make sure the different columns stay in their category on the xaxis. Now the columns overlap multiple categories while I want one column in the 1 category and the other in the 2 category. While the others stay empty.

Example:

[vuphuctho]

Adding a hack from mine: https://codepen.io/vuphuctho/pen/poobNPG
In chart options we can retrieve and display total number of stacked bar chart like so:

dataLabels: {
    enabled: true,
    offsetY: -20,
    style: {
      fontSize: '12px',
      colors: ["#304758"]
    },
    formatter: function(value, { seriesIndex, dataPointIndex, w}) {
      return w.globals.stackedSeriesTotals[dataPointIndex];
    }
  },

Just wondering why no data label but only the ones on top of the stack is displayed. But overall it meets OP requirement.

[aessig]

@vuphuctho thank you for the snippet.
Have you found a way of hiding the total amount when hovering the legends ?

[hardik-kondhiya]

@jeroenpol

You can simply use "formatter" under "dataLabels" and it will give you the total of your stacked column.

Here is what I have used in my project and that's it.

formatter: function (value, { seriesIndex, dataPointIndex, w }) {
    if (seriesIndex === ((w.config.series.length) - parseInt(1)))
        return w.globals.stackedSeriesTotals[dataPointIndex];
    return "";
}