UI components

LightningChart JS includes built-in features for simple UI components, like Text Boxes and Legends. These can be created with Chart.addUIElement method:

const textBox = chart.addUIElement(UIElementBuilders.TextBox)
    .setText('Hello')
    .setPosition({ x: 10, y: 10 })
    .setOrigin(UIOrigins.LeftTop)
    .setVisible(true)

By default, UI elements are positioned as percentage of the owning chart, where x: 10 = 10% from left, and y: 10 = 10% from bottom. They can also be positioned in axis coordinates or pixels, by specifying the coordinate system:

// Example, position UI in axis coordinates
const axisX = chart.getDefaultAxisX()
const axisY = chart.getDefaultAxisY()
const textBox = chart.addUIElement(UIElementBuilders.TextBox, { x: axisX, y: axisY })
    .setPosition({ x: 10, y: 10 })

// 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)
    .setPosition({ x: 10, y: 20 })
    .setOrigin(UIOrigins.LeftBottom)

These can be convenient for many every-day use cases, but if more advanced styling options are needed, then we suggest Interop with UI frameworks instead.

---

Changing font size

textBox.setTextFont((font) => font.setSize(10))

See Styles and fonts for more information.

UI backgrounds

UI elements have a background component that is visible by default. It is configured via setBackground method:

textBox.setBackground((background) => background
    // red fill, green 1 px border
    .setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setStrokeStyle(new SolidLine({ fillStyle: new SolidFill({ color: ColorRGBA(0, 255, 0) }), thickness: 1 }))
)

// Hide background
textBox.setBackground((background) => background
    .setFillStyle(emptyFill)
    .setStrokeStyle(emptyLine)
)

Preventing user from moving UI elements

textBox.setDraggingMode(UIDraggingModes.notDraggable)

or

textBox.setMouseInteractions(false)

Positioning at corners of axes

The traditional way of doing this is by positioning the element in axis coordinates, and then repositioning it whenever the axis interval changes:

const axisX = chart.getDefaultAxisX()
const axisY = chart.getDefaultAxisY()
const textBox = chart.addUIElement(UIElementBuilders.TextBox, { x: axisX, y: axisY })
    .setOrigin(UIOrigins.LeftTop)
    .setMouseInteractions(false)
const positionTextBox = () => {
    textBox.setPosition({ x: axisX.getInterval().start, y: axisY.getInterval().end })
}
positionTextBox()
axisX.onIntervalChange(positionTextBox)
axisY.onIntervalChange(positionTextBox)

UI Layouts

There are also basic features for positioning a number of UI elements relative to each other, Layouts:

const uiLayout = chart.addUIElement(UILayoutBuilders.Column)
    .setPosition({ x: 10, y: 10 })
    .setOrigin(UIOrigins.LeftTop)

const label1 = uiLayout.addElement(UIElementBuilders.TextBox)
    .setText('Label #1')

const label2 = uiLayout.addElement(UIElementBuilders.TextBox)
    .setText('Label #2')