show Datalabels (total and dataLabel name) on a column chart- ReactJs highcharts

Question

I'm using Grouped by column highcharts. ex: https://jsfiddle.net/2bvudw1m/

Is there a way where I can show datalabels representing the y count(at the top of the column series) and the dataLabel name(at the bottom) for a column? For example: this is my series data:

 series: [{
      name: 'active',
      data: [53, 33, 43, 63, 7, 83],
       dataLabels: {
        enabled: true,
        verticalAlign: 'bottom',
        overflow: 'none',
        crop: false,
        y: 20,
        formatter() {
          return this.series.userOptions.name;
        }
      }
    
    }, {
      name: 'new',
      data: [33, 43, 43, 63, 73, 8],
     
    }]

i want to show 2 things:

1. count representing every serie
2. DataLabel of that serie

So far I have this:

 $(function() {
      $('#container').highcharts({

        chart: {
          type: 'column',
        },

        title: {
          text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
          categories: ['Apples', 'Oranges', 'Apples2', 'Oranges2','Apples3', 'Apple33'],
          offset: 30
        },
        yAxis: {
          allowDecimals: false,
          //offset:10,
          title: {
            text: 'Number of fruits'
          },
          stackLabels: {
            enabled: true,
            verticalAlign: 'top',
          }

        },

        plotOptions: {
        series: {
          dataLabels: {
            enabled: true,
            formatter: function() {
                return this.y;
            }
           }
         },
          column: {
            stacking: ''
          },
        },

        series: [{
          name: 'active',
          data: [53, 33, 43, 63, 7, 83],
           dataLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            overflow: 'none',
            crop: false,
            y: 20,
            formatter() {
              return this.series.userOptions.name;
            }
          }
        
        }, {
          name: 'new',
          data: [33, 43, 43, 63, 73, 8],
         
        }
        ]
      });
    });

https://jsfiddle.net/nec89t56/2/

however this does not work as when I try to add both the values it either adds the y count or the name. Is there a way to add both when the column is grouped: true and stacking: ""

Note: I cannot do stacking as "normal" as then it'll stack and not group, which is not what I want.

any ideas?

Answer 1

You can add multiple dataLabels by defining dataLabels as an array of objects where each object is a separate config for each data label.

Demo: https://jsfiddle.net/BlackLabel/op4ehx8m/

plotOptions: {
  series: {
    dataLabels: [{
      enabled: true,
      verticalAlign: 'bottom',
      overflow: 'none',
      crop: false,
      y: 20,
      formatter() {
        return this.series.userOptions.name;
      }
    }, {
      enabled: true
    }]
  },
  column: {
    stacking: ''
  },
},