Annotations labels overlapping when using addAnnotation

const randomString = (length) =>
  Array(length)
  .fill('')
  .map(() => '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' [Math.floor(Math.random() * 62)])
  .join('');

let chartData = [];

for (i = 0; i < 20; i++) {
  chartData.push({
    id: String.fromCharCode(i + 65),
    name: randomString(20),
    x: Math.random() * 100,
    y: Math.random() * 100
  });
}

function createChartAndAnnotations() {
  let options = {
    chart: {
      renderTo: "container",
      type: 'scatter',
      plotBorderWidth: 1,
      events: {
        load: function() {
          addAnnotations(this);
        }
      }
    },
    xAxis: {
      gridLineWidth: 1
    },
    yAxis: {
      startOnTick: false,
      endOnTick: false
    },
    series: [{
      data: chartData,
      marker: {
        symbol: "square"
      }
    }]
  };

  let chart = new Highcharts.Chart(options);

  function addAnnotations(chart) {
    let annotationsLabels = chartData.map(el => ({
      allowOverlap: false,
      point: el.id.toString(),
      text: el.name
    }));

    chart.addAnnotation({
      draggable: "",
      id: "chartAnnotations",
      labels: annotationsLabels,
      labelOptions: {
        align: "left",
        allowOverlap: false,
        borderColor: "#5c5c5c",
        shape: 'connector'
      }
    });
  }
}

createChartAndAnnotations();

#container {
    height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

<script src="https://code.highcharts.com/stock/9/highstock.js"></script>
<script src="https://code.highcharts.com/9/highcharts-more.js"></script>
<script src="https://code.highcharts.com/9/modules/annotations.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>