Lightning Chart Bar Chart type Horizontal with axis at the bottom

I am using lightningChartJS

with a heatmap and horizontal bar chart

as seen in the image below.

How can I make (1 in the image) the x-Axis to be at the bottom position (2) in order to be aligned with (3)?

This is the code I am using to initialize the charts

const createRMSGraph = (divRef: string) => {

  const chart = lc
    .BarChart({
      container: divRef,
      theme: theme,
      type: BarChartTypes.Horizontal,
    })
    .setSeriesBackgroundFillStyle(BackgroundFill)
    .setTitle('');

  const data = [
    { category: 'Helsinki', value: 19.1 },
    { category: 'New York', value: 20.6 },  ];

  chart.setData(data);
};

const createPSDGraph = (divRef: string) => {
  //init
  const theme = Themes.light;
  const BackgroundFill = new SolidFill({
    color: ColorHEX('#ffffff'),
  });
  const chart = lc
    .ChartXY({
      container: divRef,
      theme: theme,
    })
    .setSeriesBackgroundFillStyle(BackgroundFill)
    .setTitle('');

  // add heatmap on top of 
  chart.addHeatmapGridSeries({
    columns: 1000,
    rows: 1000,
  });  
};

export { createPSDGraph };

following this link

https://lightningchart.com/js-charts/docs/4.2.1/basic-topics/multiple-axes-and-axis-locations/#:~:text=Axes%20can%20also%20be%20positioned%20at%20the%20opposite,the%20ChartXY%20is%20created%3A%20const%20chart%20%3D%20lightningChart%28%29.ChartXY%28%7B

by adding this property at the initializing I solved the issue

      defaultAxisY: { opposite: true },

for

.ChartXY({
      container: divRef,
      theme: theme,
      defaultAxisY: { opposite: true },
    })

the full function

const createRMSGraph = (divRef: string) => {
  const theme = Themes.light;
  const BackgroundFill = new SolidFill({
    color: ColorHEX('#ffffff'),
  });
  const chart = lc
    .ChartXY({
      container: divRef,
      theme: theme,
      defaultAxisY: { opposite: true },
    })
    .setSeriesBackgroundFillStyle(BackgroundFill)
    .setTitle('');
  const segmentSeries = chart
    .addSegmentSeries()
    .setDefaultStyle((figure) => figure.setStrokeStyle((stroke) => stroke.setThickness(2)));

  const histogramData = [
    { x: 25.01, y: 195.2317495 },
    { x: 24.01, y: 205.7760001 },
    { x: 23.07, y: 196.348065 },
    { x: 22.1, y: 343.456708 },
    { x: 21.09, y: 343.456708 },
    { x: 20.12, y: 260.5814188 },
  ];
  histogramData.forEach((point) => {
    segmentSeries.add({ startX: point.x, startY: 0, endX: point.x, endY: point.y });
  });
};