Skip to main content
Version: 7.1.2

HTML text rendering

Text rendering is heavy work. Historically, all LightningChart JS text has been rendered using WebGL for the best performance. However, WebGL rendered text has its cons as well. For this reason, starting with LightningChart JS v7.1, users can choose between WebGL text rendering and HTML text rendering.

info

HTML text rendering is released as a beta functionality to receive testing among user base. The API syntax and functionality may be later changed or developed further according to interactions with users.

If you have any feedback on HTML text rendering for your particular use case, please contact us.

When should HTML text rendering be considered?​

  1. You want the sharpest, best quality text. HTML rendered text is clearly sharper than WebGL.
  2. You want to display LaTeX or other non-standard typesetting.
  3. You want to display multi-line text elements.
  4. You want to modify text display with CSS (drop shadows, background colors, transitions, etc.).
  5. You want to allow accessibility features (such as translation, text to speech) to interact with LCJS text elements.

What drawbacks can switching to HTML text rendering have?​

  1. Increased CPU usage. Depends on how many text elements there are, and how varying their content and positions are.
  2. Draw order control limitations. All HTML text is always drawn above the owning charts visuals. For example, you can't hide a HTML text element with LightningChart JS components, unless its a different chart entirely.

How to use HTML text rendering?​

// Example, enable HTML text rendering
const chart = lc.ChartXY({
  textRenderer: htmlTextRenderer,
})

Currently, DataGrid and TextSeries do not support HTML text rendering, meaning they are always rendered with WebGL. Additionally, HTML text rendering can't be used together with lcjs-headless.

Displaying LaTeX / TeX​

LightningChart JS itself can't display LaTeX or TeX. Instead, this can be achieved with use of other libraries, such as MathJax or KaTeX.

LightningChart JS includes built-in API calls to MathJax and KaTeX libraries, if they are loaded to the web page. This integration was written using latest APIs available in February 2025, but there is no guarantee that it will work with any version of MathJax or KaTeX.

MathJax + LaTeX example:

// Examples of displaying LaTeX in LightningChart JS text elements
chart.setTitle(`latex:\\[
        \\int_a^b f(x) \, dx = F(b) - F(a)
\\]`)
chart.axisX.setTitle(`latex:\\(E = mc^2\\)`)

In order for this to work:

  1. HTML text rendering must be enabled
  2. MathJax library has to be loaded on the web page
 <script type="text/javascript" id="MathJax-script" async
   src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
 </script>

KaTeX + TeX example:

// Examples of displaying TeX in LightningChart JS text elements
chart.setTitle(`tex:c = \\pm\\sqrt{a^2 + b^2}`)

In order for this to work:

  1. HTML text rendering must be enabled
  2. KaTeX library has to be loaded on the web page
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh" crossorigin="anonymous"></script>

Applying CSS to LCJS text elements​

When HTML text rendering is active, all LCJS text elements will be displayed by automatically created DOM elements. They can be identified using CSS classname lcjs-text

More granular identification (e.g. what text object is in question?) has not been added as the use cases are unclear.

Some CSS properties are assigned via JS by LCJS (to position the text objects on the web page). If you wish to override these properties via CSS, you have to use the !important syntax.

.lcjs-text {
    background-color: green;
    color: red !important;
}