Lightning chart UI components width and height

Question

I have followed this instructions:

https://lightningchart.com/js-charts/docs/features/ui/

and got this box, I don't need to put text in it so I just put an empty string ' '

is it possible to control the width and height of the TextBox?

for example to make the TextBox height to be from 20.0 to 16.0 ?

for example if I want to specify the TextBox dimensions as a rectangle for each point what to be located?

imports

export const CreateLeadChart = (
  dashboard: Dashboard,
  maxYChartBorder: number
) => {
  const BackgroundFill = new SolidFill({
    color: ColorHEX("#ffffff"),
  });

  const LeadChart = dashboard
    .createChartXY({
      columnIndex: 2,
      rowIndex: 0,
    })
    .setSeriesBackgroundFillStyle(BackgroundFill);


  const blacklineSeries = LeadChart.addLineSeries({}).setStrokeStyle(
    (stroke) =>
      new SolidLine({
        thickness: 7,
        fillStyle: new SolidFill({ color: ColorHEX("#212121") }),
      })
  );

  const tipLineSeries = LeadChart.addLineSeries({}).setStrokeStyle(
    (stroke) =>
      new SolidLine({
        thickness: 2,
        fillStyle: new SolidFill({ color: ColorHEX("#BDBDBD") }),
      })
  );

  const dataGray = [
    { x: 2.0, y: 10.52, z: 1 },
    { x: 2.0, y: maxYChartBorder, z: 12 },
  ];


  const dataTip = [
    { x: 2.0, y: 9.52, z: 1 },
    { x: 2.0, y: 8.52, z: 1 },
  ];

  graylineSeries.add(dataGray);
  blacklineSeries.add(dataBlack);
  tipLineSeries.add(dataTip);

  // display blue and red boxes https://lightningchart.com/js-charts/docs/features/ui/
  const axisX = LeadChart.getDefaultAxisX();
  const axisY = LeadChart.getDefaultAxisY();
  const textBox = LeadChart.addUIElement(UIElementBuilders.TextBox, {
    x: axisX,
    y: axisY,
  })
    .setPosition({ x: 2.2, y: 20 })
    .setOrigin(UIOrigins.LeftTop)
    .setVisible(true)
    .setText("      ");

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

  textBox.setBackground((background) =>
    background.setFillStyle(new SolidFill({ color: ColorHEX("#039BE5") }))
  );

  return LeadChart;
};

Answer 1

https://lightningchart.com/js-charts/docs/features/xy/figures/

const rectangleSeries = chart.addRectangleSeries()
const rectangleFigure = rectangleSeries
    .add({ x1: 0, y1: 0, x2: 10, y2: 10 })
    // Optional, changing default style
    .setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 255) }) }))