Interop with UI frameworks

LightningChart JS is a frontend library for data visualization. It also includes some simple features for generic UI components, like text boxes and check boxes. However, it is NOT a full-fledged UI framework. As such, LightningChart JS is usually used together with an UI framework, like React, Angular, Vue, etc.

At the simplest level, this just means that the UI layout and content other than charts (like text, buttons, dropdowns, pictures, navigations, etc.) are rendered with an UI framework and charts are just placed into <div> elements as part of the user interface.

However, in many cases there is also need to overlay general UI content above the charts. This can mean a lot of things, here are some examples:

• Chart overlays
• Info panels
• Handles for resizing, moving or removing charts
• Cursors and result tables*
• Legends*

Our recommendation is that general UI content like this is rendered with the dedicated UI framework, rather than LightningChart JS, even if the content is above the charts, for example. This allows reusing components and requires the developers to learn less new things since they can just use the UI framework they are familiar with.

(*) LightningChart JS includes built-in features for cursors and legends. Using these is recommended unless more advanced styling (CSS) is needed.

---

Content from any UI framework or even direct HTML can be easily placed over LightningChart JS components. This can be done in two ways:

1. Overlay element as child of chart container DIV (position using coordinates relative to chart)

// As child element
<div id="chart">
    <span id="text" style="position: absolute">Overlay Text</span>
</div>

2. Overlay element positioned floating on document body (position using coordinates relative to web page top left)

<div id="chart" style="width: 500px; height: 500px"></div>
<span id="text" style="position: absolute">Overlay Text</span>

The first approach is slightly more convenient to use, the below examples assume that the HTML element is placed as child of chart container <div>.

Align HTML position to axes

// Position HTML text element at corner of X and Y axes (left-bottom corner)
chart.addEventListener('layoutchange', (event) => {
    const text = document.getElementById("text");
    text.style.left = `${event.margins.left}px`
    text.style.top = `${event.margins.top + event.viewportHeight}px`
    text.style.transform = 'translateY(-100%)'
})

Position HTML at axis coordinate

This can be done by translating Axis coordinates to pixel offset from chart:

chart.forEachAxis((axis) =>
    axis.addEventListener('intervalchange', (event) => {
        const locAxis = { x: 0, y: 0 }
        const locRelative = chart.translateCoordinate(locAxis, chart.coordsAxis, chart.coordsRelative)
        text.style.left = `${locRelative.x}px`
        text.style.bottom = `${locRelative.y}px`
    })
)

It's worth pointing out that chart.coordsRelative coordinate system is relative to bottom-left of chart, so text.style.bottom is used, rather than text.style.top.

More information about Coordinate translations can be found under each Chart type - for example, XY Chart.

Lastly, as a general summary on when to use UI framework for content above charts, and when maybe not:

• If you need some UI that is deeply ingrained into the charts. For example, drawn between chart background and series, then you should look into suitable LightningChart features.
• If you want to use CSS and in general have access to more styling options, then it is better to render with UI framework.