Skip to main content
Version: 6.1.2

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](/6.1.2/features/html-interop) instead.

Changing font size​

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

See Styles and fonts](/6.1.2/more-guides/styles-colors-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 viewport​

const textBox = chart.addUIElement(undefined, chart.coordsRelative)
chart.addEventListener('layoutchange', (event) => {
    textBox.setOrigin(UIOrigins.LeftTop).setPosition({ x: event.margins.left, y: event.margins.bottom + event.viewportHeight })
}, { fireImmediately: true })

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')