Adding annotations on multiple dataPoints

[Neophen]

Hello, i've been reading the docs and can't find a nice way to implement this kind of behaviour:

Question is there a defined way of doing this?

I could not find anything in the documentation about how to create these kinds of labels/annotations

Explanation of current solution

Where i show the annotation on top of every collumn in the series.

What i do now:
I add mouse events

  chart: {
    type: 'bar',
    id: 'ShipmentVolumesChart',
    events: {
      dataPointMouseEnter: addAnnotations,
      dataPointMouseLeave: (_, chart) => chart.clearAnnotations(),
    },
  },

where addAnnotations does the following:

const addAnnotations = (event, chart, config) => {
  chart.clearAnnotations();

  const { seriesIndex } = config;
  const { xaxis, series } = config.w.config;
  const offsetX = getOffsetX(event, seriesIndex, series);
  const dataPoints = series[seriesIndex].data;

  const annotations = dataPoints.map(toAnnotation(xaxis.categories, offsetX));

  annotations.forEach((annotation) => {
    chart.addPointAnnotation(annotation, false);
  });
};

At the moment i'm getting the offsetX with a hack:

const getOffsetX = (event, seriesIndex, series) => {
  const { width } = event.target.getBBox(); // get the collumn width
  const seriesWidth = series.length * width; // get the whole series width
  const startOffset = 0 - seriesWidth / 2; // get the start of the offset from midpoint 0 is middle
  return startOffset + seriesIndex + seriesIndex * width; // calculate the +- offset for the label
};

And this is the toAnnotation function just in case you need more information:

const toAnnotation = (categories, offsetX) => (point, i) => {
  const category = categories[i];
  return {
    x: category,
    y: point,
    label: {
      offsetX,
      text: `${point}%`,
     // other settings to make the text look as i want
    },
    marker: {
      size: 0,
    },
  };
};