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 by rendering the overlay elements as a child of the chart container <div>, or using absolute positioning.

// As child element
<div id="chart">
    <div style="position: relative; z-index: 100">
        <span>Overlay Text</span>
    </div>
</div>

// With absolute positioning
<div id="chart" style="width: 500px; height: 500px"></div>
<span id="text" style="position: absolute">Overlay Text</span>
<script>
    const text = document.getElementById("text");
    const bounds = chart.engine.container.getBoundingClientRect();
    text.style.left = `${bounds.left}px`;
    text.style.top = `${bounds.top}px`;
</script>

Absolute positioning also allows to position external UI content on LCJS specific coordinate systems, like Axis coordinates. This can be done by translating Axis coordinates to client:

const axisX = chart.getDefaultAxisX()
const axisY = chart.getDefaultAxisY()
// Position HTML text element whenever X or Y axis interval changes
;[axisX, axisY].forEach((axis) => axis.onIntervalChange(() => {
    const text = document.getElementById("text");
    const locationAxis = { x: axisX.getInterval().start, y: axisY.getInterval().end }
    const locationClient = chart.translateCoordinate(locationAxis, chart.coordsAxis, chart.coordsClient)
    text.style.left = `${locationClient.x}px`;
    text.style.top = `${locationClient.y}px`;
}))

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.