LightningChartJS with React: TextBox Displayed Incorrectly on Right Bottom

Question

I'm integrating LightningChartJS with a ReactJS project and facing an issue where the position of a TextBox does not align as expected. Despite setting the origin to UIOrigins.RightBottom and using chart.coordsRelative for positioning, the TextBox still appears on the left bottom instead of the right bottom.

Here is the problematic behavior shown in the screenshot:

Here's the relevant part of my code:

code

import { useEffect } from "react";
import "./styles.css";
import { lightningChart, UIElementBuilders, UIOrigins } from "@arction/lcjs";
export default function App() {
  useEffect(() => {
    const lc = lightningChart();
    const chart = lc.ChartXY({ container: "chart" });
    // Example, position UI in pixels relative to chart (10 pixels from left edge, 20 pixels from bottom edge)
    const textBox = chart
      .addUIElement(UIElementBuilders.TextBox, chart.coordsRelative)
      .setOrigin(UIOrigins.RightBottom)
      .setPosition({ x: 50, y: 20 });
  }, []);

  return <div id="chart" style={{ width: "500px", height: "500px" }}></div>;
}

The TextBox should be positioned 50 pixels to the left from the right edge and 20 pixels up from the bottom, but as you can see from the image, it doesn't appear where it should.

Does anyone have suggestions on how to fix this issue so the TextBox appears in the right bottom as expected?

Answer 1

Here is an adjusted version of the code. It seems there has been some misunderstanding on the concept of "setOrigin" method. It specifies which part of the UI element itself is positioned at the location configured with "setPosition" e.g. RightBottom in this case is used to position the right bottom corner of the text box.

The suggested way to position UI with pixel offsets is to use chart.getSizePixels() like below. It's worth pointing out that this would require the UI to be repositioned when chart size changes, generally this is realized like below:

const lc = lightningChart();
const chart = lc.ChartXY();
// Position UI 50 pixels to left from right edge, 20 pixels up from bottom
const textBox = chart
    .addUIElement(UIElementBuilders.TextBox, chart.coordsRelative)
    .setOrigin(UIOrigins.RightBottom)
    .setDraggingMode(lcjs.UIDraggingModes.notDraggable)

const updatePosition = () => {
    textBox.setPosition({ x: chart.getSizePixels().x - 50, y: 20 });
}
updatePosition()
chart.onResize(updatePosition)