How to Ensure Text Stays Below a Stacked X-Axis in LightningChartJS with React-TypeScript?

I am using lightningChartJs

with React-TypeScript, and I want to know,

according to my use case I have a chart with 3 stacked axises, on the x axis.

the first x-Axis is normal, the second is invisible but not with setVisible, the other way , with this snippet

  xAxisNucleus.setTickStrategy(AxisTickStrategies.Numeric, (tickStrategy) =>
    tickStrategy.setTickStyle((ticks) => ticks.setGridStrokeStyle(emptyLine)),
  );

and the third one is normal

enter image description here

the trouble is with the words underneath the middle chart

enter image description here
enter image description here

in different sizes it become on top of the chart as the image above.

how can I add text to behave as if it was the x-axis so that it would always fit underneath it,

full snippet for drawing textbox at position:

  const xAxis = xAxisNucleus;
  const yAxis = chart.getDefaultAxisY();
  hideAxis(xAxis);

  xAxis.setMouseInteractions(false)

  // notes
  const textBox2 = chart
    .addUIElement(UIElementBuilders.TextBox, { x: xAxis, y: yAxis })
    .setOrigin(UIOrigins.RightBottom)
    .setVisible(true)
    .setText('Notes')
    .setTextRotation(270);

  textBox2.setMouseInteractions(false); // preventing from user to drag

  textBox2.setBackground((background) =>
    background.setFillStyle(emptyFill).setStrokeStyle(emptyLine),
  );

  const updatePosition = (textBox: UITextBox & UIElement, chart: ChartXY) => {
    textBox.setPosition({ x: 5.7, y: chartSliders[0] - (chartSliders[1] - chartSliders[0]) * 0.05 }); // value[0] - (value[1] - value[0]) * 0.05
  };
  updatePosition(textBox2, chart);

  chart.axisY.setMouseInteractions(false);
  chart.axisY.setTickStrategy(AxisTickStrategies.Numeric, (tickStrategy) =>
    tickStrategy.setTickStyle((ticks) => ticks.setGridStrokeStyle(emptyLine)),
  );

  // Haguide
  const textBox3 = chart.addUIElement(UIElementBuilders.TextBox, { x: xAxis, y: yAxis })
    .setOrigin(UIOrigins.LeftBottom)
    .setPosition({ x: 4.3, y: chartSliders[0] - (chartSliders[1] - chartSliders[0]) * 0.05 })
    .setVisible(true)
    .setText('HaGuide')
    .setTextRotation(270);

  textBox3.setMouseInteractions(false); // preventing from user to drag

  textBox3.setBackground((background) =>
    background.setFillStyle(emptyFill).setStrokeStyle(emptyLine),
  );
  textBox3.setTextFont((font) => font.setSize(8));
  textBox2.setTextFont((font) => font.setSize(10));