Data Labels are being overlapped in a horizontal series Apex Bar chart

Question

Bar Chart - enter image description here

I need to resolve the issue where the data labels above all the data colums are overlapped by one another when a large number of data colums are close together. I tried many different approaches to hide the overlapping data, but the attempts was unsuccessful.

Code-

const chartOptions = merge(otherOptions, {
    colors: colorPalette ? undefined : getChartColors('bar'),
    theme: {
      mode: 'light',
      palette: colorPalette,
      monochrome: {
        enabled: enableMonoChromeColors,
        color: monoChromeBaseColor.startsWith('#')
          ? monoChromeBaseColor
          : theme.palette[monoChromeBaseColor].main,
        shadeTo: 'light',
        shadeIntensity: 0.65
      }
    },
    chart: { stacked: stacked },
    legend: {
      show: showLegend,
      itemMargin: { vertical: 4 },
      position: 'bottom',
      offsetY: 5,
      height: 50
    },
    plotOptions: {
      bar: {
        columnWidth: `${barWidth}%`,
        endingShape: 'squared',
        dataLabels: {
          position: 'top',
          hideOverflowingLabels: true,
          orientation: 'horizontal'
        }
      }
    },
    dataLabels: {
      enabled: showDataLabels,
      offsetY: dataLabelsInside ? -5 : -22,
      formatter: function (val, opts) {
        return `${chartFormatter(val, type)} ${unit}`;
      },
      style: {
        fontSize: fontSize,
        colors: dataLabelsInside
          ? [theme.palette.common.white]
          : [theme.palette.grey[600]],
        fontWeight: '500',
        fontFamily: 'Rubik, sans-serif'
      }
    },
    xaxis: {
      show: !hideXAxis,
      categories: data.categories,
      type: type,
      labels: {
        show: !hideXAxis,
        rotate: skewLabels ? -90 : 0,
        hideOverlappingLabels: false,
        showDuplicates: false,
        trim: true,
        style: {
          colors: [],
          fontSize: fontSize
        }
      }
    },
    yaxis: {
      floating: hideYAxis,
      axisTicks: {
        show: !hideYAxis
      },
      axisBorder: {
        show: !hideYAxis
      },
      labels: {
        show: !hideYAxis,
        formatter: (val) => chartFormatter(val, type)
      }
    },
    grid: {
      show: !hideYAxis,
      padding: {
        left: 20,
        right: 20,
        ...paddingOverrides
      }
    },
    tooltip: {
      enabled: tooltipsEnabled,
      fillSeriesColor: true,
      followCursor: false,
      y: {
        formatter: (val) => `${chartFormatter(val, type)} ${unit}`
      },
      title: {
        formatter: (seriesName) => {
          const formatted = (seriesName || EMPTY_STRING).split(' - ');
          return formatted.length > 1 ? formatted[1] : seriesName;
        }
      }
    }
  });

  return (
    <ReactApexChart
      type="bar"
      series={data?.chartData}
      options={chartOptions}
      height={
        chartHeight && hideXAxis && !showLegend
          ? chartHeight - chartHeight * 0.08
          : chartHeight
          ? chartHeight
          : '100%'
      }
    />
  );

I have tried hideOverflowingLabels: true, inside the datalabels to avoid the labels from overlapping but it has done no good