🧐[Question] how to connect Columns with annotations with labels?

[d0ublezer0]

🧐 I need to create annotation polyline that connects some columns in Column chart, with text label on top center

How to do this?
The problem is: a cannot put text annotation between columns, only to dataset index.
So, i try to calculate column width with fixed chart width, but result is so unstable and not flexible.
In 1.x version i can use float indexes to put annotation between columns

💻 Code example

const DemoColumn = () => {
  const chartWidth = 800
  const columnWidth = 70

const data = [
  { type: 1, value: 2 },
  { type: 2, value: 1 },
  { type: 3, value:3 },
  { type: 4, value: 4 },

];
  const config = {
    data,
    xField: 'type',
    yField: 'value',
    width: chartWidth,
    style: {
      fill: ({ type }) => {
        if (type === '10-30分' || type === '30+分') {
          return '#22CBCC';
        }
        return '#2989FF';
      },
      minWidth: columnWidth,
      maxWidth: columnWidth,
    },
    scaleValue: {
      x: {
        label: false
      },
    },
    label: {
      text: (originData) => {
        const val = parseFloat(originData.value);
        return val
      },
    },
    
    legend: false,
       annotations: [
     
      {
        type: 'line',
        xField: 'type',
        yField: 'value',        
        data: [
          {type: 1, value: 2},
          {type: 1, value: 4.5},
          {type: 4, value: 4.5},
          {type: 4, value: 4},
          ],
        style: { 
          arrow: true, 
          stroke: 'red', 
          lineDash: [2, 2], 
        },
        tooltip: false
        
      },
         {
        type: 'text',
        xField: 'type',
        yField: 'value',
        data: [1,4.5],
        style: {
          text: 'label 100',
          // (chartWidth / columnCount / 2) * betweenConnectedColumns - ticksWidth
          dx: ((chartWidth/4) / 2) * 3 - 20,
          textAlign: 'center',
          fill: 'red',
          background: true,
          backgroundRadius: 4,
          backgroundFill: 'yellow',
          backgroundOpacity: 10,
          backgroundStroke:'red',          
        },
        tooltip: false,
      },
    ],
  };
  return <Column {...config} />;
};

there is old working example from 1.x Ant charts version

const annotations: = [{
          type: 'text',
          content,
// the non-integer position worked well
          position: [startIndex + (endIndex - startIndex) / 2, lineHeight],
        }]

🚑 Example, what i need