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

Question

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

the trouble is with the words underneath the middle chart

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:

 import "./styles.css";
import React, { useEffect } from "react";
import {
  Axis,
  AxisTickStrategies,
  emptyFill,
  emptyLine,
  lightningChart,
  transparentFill,
  UIElementBuilders,
  UIOrigins,
} from "@lightningchart/lcjs";

export default function App() {
  useEffect(() => {
    const lc = lightningChart({
      license:
        "0002-n3X9iO0Z5d9OhoPGWWdBxAQ6SdnSKwB0/bH5AezBWp6K2IHfmcHtrmGsuEfyKfMUywnFPEbJ/vz5wfxYNmTstcut-MEYCIQDBYzSNR+IpXP765q1bC8E4xWsWHfWS0CLLjh2DYiBi0wIhAOMmdh9c3bmnsXnk6b5Xd+ngHLhuM0pJSapgpHg21+Br",
      licenseInformation: {
        appTitle: "LightningChart JS Trial",
        company: "LightningChart Ltd.",
      },
    });
    const chart = lc.ChartXY({
      container: "chart",
    });
    const yAxis = chart.getDefaultAxisY();
    const axisX1 = chart.axisX;
    const axisX2 = chart.addAxisX({ iStack: 1 });
    const axisX3 = chart.addAxisX({ iStack: 2 });
    axisX1.setMargins(0, 20);
    axisX2.setMargins(0, 10);
    const hideAxis = (axisParameter: Axis) => {
      axisParameter
        .setStrokeStyle(emptyLine)
        .setThickness(0)
        .setTickStrategy(AxisTickStrategies.Numeric, (strategy) =>
          strategy.setTickStyle((ticks) =>
            ticks.setLabelFillStyle(transparentFill).setTickStyle(emptyLine)
          )
        );
    };
    hideAxis(axisX2);

    axisX3.setMargins(10, 0);
    chart.setTitle("");
    chart.setPadding({ left: 0, right: 15, bottom: 0 });
    axisX1.setLength({ relative: 0.475 });
    axisX2.setLength({ relative: 0.05 });
    axisX3.setLength({ relative: 0.475 });

    /// how to add text to the middle chart to stay underneath it all the time?
    // Haguide
    const textBox3 = chart
      .addUIElement(UIElementBuilders.TextBox, { x: axisX2, y: yAxis })
      .setOrigin(UIOrigins.LeftBottom)
      .setPosition({
        x: 4.3,
        y: 0,
      })
      .setVisible(true)
      .setText("HaGuide")
      .setTextRotation(270);

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

    textBox3.setBackground((background) =>
      background.setFillStyle(emptyFill).setStrokeStyle(emptyLine)
    );
  }, []);

  return (
    <div
      id="chart"
      style={{ width: "1200px", height: "500px" }}
      className="App"
    ></div>
  );
}

github link https://github.com/ddublon/stacked-axises/blob/main/src/App.tsx

codesandbox link https://5tdh6n.csb.app/