highcharts css stacked label

by Black Label

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

.highcharts-stack-labels text {
  transform: translate(0, 20px);
}

JavaScript

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

        chart: {
          type: 'column',
          events: {
            render() {
              const chart = this;

              chart.series.forEach(s => {
                s.points.forEach(p => {
                  if (p.dataLabel && p.dataLabel.width > p.pointWidth || p.dataLabel && p.dataLabel.text.styles.textOverflow) {
										let dataLabel = p.dataLabel;
                    dataLabel.css({
                      width: p.pointWidth,
                      textOverflow: 'ellipsis'
                    })
										
										dataLabel.translate(p.barX - 5, chart.plotHeight)
                  }
                })
              })
            }
          }
        },

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

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

        },
        tooltip: {
          formatter: function() {
            return '<b>' + this.x + '</b><br/>' +
              this.series.name + ': ' + this.y + '<br/>' +
              'Stack: ' + this.series.options.stack;
          },
        },

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

        series: [{
          name: 'John',
          data: [5, 3],
          stack: 'malesssssssssssss'
        }, {
          name: 'Joe',
          data: [3, 4],
          stack: 'female'
        }, {
          name: 'Jane',
          data: [2, 5],
          stack: 'malesssssssssssss',
          dataLabels: {
            enabled: true,
            verticalAlign: 'bottom',
            inside: true,
            overflow: 'allow',
            crop: false,
            y: 20,
            formatter() {
              return this.series.userOptions.stack
            }
          }
       ...