Is it possible to create two xAxis, where one is normal and the other one is Horizontally Stacked Axis Layout?

For the switched placement of normal and stacked axes:

You can just make update the layoutAxes method by changing the order in which you are applying the stacked/normal strategies and using an appropriate offset from the top.

The function before:

  // Override layoutAxes from the base class
  layoutAxes(left, top, right, bottom, axes) {
    const [firstAxis, ...stackedAxes] = axes;
    // layout first axis with the regular logic
    this.defaultBottomOuterAxisLayoutStrategy.layoutAxes(
      left, top, right, bottom, [firstAxis]
    );

    // after the layout phase we get axis.viewRect which specifies size and position of an axis
    // and then we can layout rest of the axes with stacked strategy beneath it.
    super.layoutAxes(left, firstAxis.viewRect.bottom, right, bottom, stackedAxes);
  }

results in this

The function after:

layoutAxes(left, top, right, bottom, axes) {
    const [firstAxis, ...stackedAxes] = axes;
    // layout stacked axes first
    super.layoutAxes(left, top, right, bottom, stackedAxes);

    // then get the top offset for the normalAxis with stackedAxis.viewRect.bottom
    const stackedAxis = stackedAxes[0]
    this.defaultBottomOuterAxisLayoutStrategy.layoutAxes(
        left,
        stackedAxis.viewRect.bottom,
        right,
        bottom,
        [firstAxis] // normal axis
    );
}

results in this

Hello, here is an example of creating a custom Axis Layout Strategy by extending a strategy provided by the lib:

// Example of creating a custom layout manager. 
//
// Axis rendering  happens in 2 phases: measure & layout.
// Axis size and positioning is calculated by an axis layout strategy accordingly to the axisAlignment and isInner properties
// This custom Layout Strategy applies normal layout strategy to the first axis and the stacked strategy to the rest of bottom-aligned outer axes
class CustomAxisLayoutStrategy extends BottomAlignedOuterHorizontallyStackedAxisLayoutStrategy {

  constructor() {
    super();

    /** The strategy used for normal (non-stacked) layout */
    this.defaultBottomOuterAxisLayoutStrategy = new BottomAlignedOuterAxisLayoutStrategy();
  }

  // override measureAxes from the base class
  measureAxes(sciChartSurface,  chartLayoutState,  axes) {
    const [firstAxis, ...stackedAxes] = axes;
    // measure stacked axes and max height (stackedAreaSize) required by them
    super.measureAxes(sciChartSurface, chartLayoutState, stackedAxes);
    const stackedAreaSize = chartLayoutState.bottomOuterAreaSize;

    // measure first axis with the regular logic
    this.defaultBottomOuterAxisLayoutStrategy.measureAxes(
      sciChartSurface,
      chartLayoutState,
      [firstAxis]
    );

    // calculate height required by the first axis and then the total height
    const firstAxisSize = getHorizontalAxisRequiredSize(firstAxis.axisLayoutState);
    chartLayoutState.bottomOuterAreaSize = firstAxisSize + stackedAreaSize;
  }

  // Override layoutAxes from the base class
  layoutAxes(left, top, right, bottom, axes) {
    const [firstAxis, ...stackedAxes] = axes;
    // layout first axis with the regular logic
    this.defaultBottomOuterAxisLayoutStrategy.layoutAxes(
      left, top, right, bottom, [firstAxis]
    );

    // after the layout phase we get axis.viewRect which specifies size and position of an axis
    // and then we can layout rest of the axes with stacked strategy beneath it.
    super.layoutAxes(left, firstAxis.viewRect.bottom, right, bottom, stackedAxes);
  }
}

Full example setup in TypeScript: https://codesandbox.io/s/custom-axis-layout-strategy-7cs243?file=/src/index.ts

There is also a Codepen for JavaScript below here:
https://codepen.io/scichart/pen/wvQNQjx

Let us know if this works fine in your case or if you find any issues while using it.