why stack labels are overlap on bar highcharts

Question

I wanted to show all stack labels on stack bar chart

I use the following properties:

      yAxis: {
        reversedStacks: false,
        min: 0,
        stackLabels: {
          endOnTick: this.reportData.showChartOnly ? false : true,
          enabled: true,
          allowOverlap: true,
          // overflow: 'none',
          crop: false,
          useHTML: true,
          inside: false,
          // overflow: 'allow',
          style: {
            fontWeight: 'normal',
            color: "#312e2e",
            fontFamily: 'Lato',
          },
          x: 8,
          y: -2,
          formatter: function () {
            let convertedValue = this.total != null && this.total != 0 ? parent.reportUtilService.convertUnit(this.total, parent.unit) : { data: this.total, unit: parent.unit };
            let value = parent.reportData.viewDef.showDecimalValue ? convertedValue.data : Highcharts.numberFormat(this.total, 0)
            return value + " " + convertedValue.unit;
          },
        },

But some values are overlapped on the bars