Handling overlapping labels

[LondonAppDev]

Hello! I'm using this plugin to show data labels on a scatter graph.

Here is a fully working example on Codepen: https://codepen.io/LondonAppDev/pen/oNyReVr

I want to implement a "bring to the front" effect of labels when you hover over them. So all labels are visible and overlap, but when I hover over a point/label it is brought to the foreground.

After reading the docs, I see that the order is determined using the dataIndex and then datasetIndex, so I tried to implement it by adding the following to options.plugins.datalabels.labels.value:

    listeners: {
        enter: function(context) {
          context.dataIndex = 999;
          context.datasetIndex = 999;
          return true;
        },
        leave: function(context) {
          context.dataIndex = 0;
          context.datasetIndex = 0;
          return true;
        }
      }

This unfortunately doesn't work, it just seems to crash when I hover.

Does anyone know if this is possible to achieve?