LightningChart JS Logo

Announcing LightningChart JS v8.3

Introducing new product features, visual quality, performance, and dev experience improvements.

New Product Features

LightningChart JS v8.3 introduces new product features. Here’s an overview:

Introducing the Sunburst Chart

In this 8.3 release, LightningChart JS introduces the sunburst chart used for displaying hierarchical data as a series of aligned rings. Each ring represents a different level in the hierarchy, where each segment is sized proportionally to its value. By introducing the Sunburst chart, LightningChart JS now makes it easier to explore part-to-whole relationships simultaneously across multiple levels.

Interact with this example

LightningChart-JS-v-8.9-Sunburst-Chart

Built-in Axis Zebra Stripes

LightningChart JS 8.3 introduces a built-in axis zebra stripes feature that has been requested by some users. Previously, users would have to implement this feature themselves by using Axis bands or other components. The built-in axis zebra stripes highlight axis value progression with a linear stepping pattern.

LightningChart-JS-v-8-Zebra-Stripes
const oneDay = 24 * 60 * 60 * 1000 // 1 day in milliseconds
axis.setZebraStripes({
    getLayout: () => ({ step: oneDay, start: new Date().getTimezoneOffset() * 60 * 1000 }),
})

Visual Quality Improvements

In this release, we are introducing Text Color Contrast Improvements that enhance the engine capabilities for displaying text borders for improved contrast in situations where text is above colorful data. Users can enjoy improved color contrast simply by updating to the latest library version.

LightningChart-JS-v-8.3-Text-Color-Contrast

Built-in Chart Opacity Filter

We’re introducing a simple method for controlling the global opacity value of specific charts, useful for adding fade-in / fade-out animations. In simple use cases, you could already do this using CSS, but in more complicated apps where shared canvas rendering is used, CSS opacity animations are not an option.

chart.engine.setOpacity(0.5)

Performance Improvements

Just when you thought that LightningChart JS could not get any faster, version 8.3 introduces Multi-threading Performance Optimizations as a built-in functionality to make your charts even snappier. With the new multi-threading performance optimizations, it is now possible to load your charts ~6 times faster and delegate all heavy CPU processing to a non-UI thread. In simple terms, multi-threading removes all the lag!

By using multi-threading, we were able to load an absolutely massive data visualization with 40 channels and 10 million data points each in just above 1 second. And you can zoom in/out/reload data without any lag.

LightningChart-JS-v-8.3-Multi-Threading-Performance-Optimizations

Developer Experience Improvements

Rectangle Series Histogram Usability Improvements

This new version adds a convenience method to alter cursor behavior with RectangleSeries to make utilization in Histogram-type (and other) applications easier. Previously, users had to add a custom cursor and position the cursor programmatically to achieve the same.

// Override default cursor in order to position cursor at the top-center of each bar, rather than default position (center of rectangle)

rectSeries.setCursorBehavior({
    location: (info) => ({ x: (info.x1 + info.x2) / 2, y: info.y2 }),
})

New Interactive Examples

JavaScript Drill-Down Nord Pool Map Dashboard

This dashboard visualizes day-ahead market data from the Nord Pool energy exchange. It provides a geographic overview of the next day’s planned power generation across the Nordic-Baltic region.

Interact with this example

LightningChart-JS-v-8.9-Map-Dashboard

Sunburst Chart Dashboard

This dashboard combines a regional map with embedded sparkline-style charts, a sortable summary table with status indicators, a dual-axis chart pairing stacked columns with an overlaid line series on a shared time axis, and a row of toggle chips for filtering.

Interact with this example

LightningChart-JS-v-8.9-Sunburst-Dashboard

Get started with LightningChart JS v8.3

To learn more about this release, visit the documentation. To see the full list of changes and improvements, see the full changelog.