how to display data labels / stacklabels for a grouped highhcarts- Highcharts

Question

I'm using React Js highcharts and I want to be able to display labels below my series value

Something like below but WITHOUT STACKING. I want them to be grouped like shown in fiddle below

I have got to working up to this: https://jsfiddle.net/fp6ue5ox/

I want to display labels:

Active, confirmed, new

I tried adding the stackLabels, but it does still show up

chart: {
          type: 'column',
        },

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

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

        },

        plotOptions: {
          column: {
            stacking: ''
          },
        },

        series: [ {
          name: 'new',
          data: [33, 99, 88, 34, 73, 88],
    
           dataLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            overflow: 'none',
            crop: false,
            y: 20,
            formatter() {
              return this.series.userOptions.stack;
            }
          }
        },{
          name: 'reopened',
          data: [42, 54, 43, 62, 74, 84],
       
          dataLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            overflow: 'none',
            crop: false,
            y: 20,
            formatter() {
              return this.series.userOptions.stack;
            }
          }

        }, {
          name: 'active',
          data: [34, 40, 42, 36, 74, 83],
       
          dataLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            overflow: 'none',
            crop: false,
            y: 20,
            formatter() {
              return this.series.userOptions.stack;
            }
          }
        }]
      });

Any idea anyone? Thanks

Answer 1

Please analyze this demo: https://jsfiddle.net/BlackLabel/2ouLy1vj/

In the formatter callback, you can set wanted format to display as a dataLabel.

  dataLabels: {
    enabled: true,
    verticalAlign: 'bottom',
    overflow: 'none',
    crop: false,
    //y: 20,
    formatter() {
      return this.series.name;
    }
  }

Also, I copied the logic from your previous question: how to determine the width of every column series present in the chart- highhcarts