LightningChart JS 7.0 is here

Hello again, I've been a little quiet here but now I bring you the biggest update for LightningChart JS this far: version 7.0 is here.

This is a big update but here are the most important updates:

New chart examples

LC JS 7.0 introduces 5 new chart examples:

1. JavaScript Time Series Annotation Chart

2. JavaScript Racing Dashboard

3. JavaScript Multi Channel Layout Dashboard

4. JavaScript Real-Time Multi Chart Dashboard

5. JavaScript Multi-Chart Canvas

Changes to built-in chart interactions

The latest version of LightningChart JS introduces improved built-in interactions for a smoother development experience. Zoom-to-fit is now triggered with a double-click, smart interaction schemes are automatically selected based on chart structure, and touchscreen interactions have been enhanced. Additionally, scrolling axis applications now offer more convenient interaction handling.

Introducing the setUserInteractions

A new API offers detailed control over interactions, letting you specify affected axes, enable actions via Ctrl, Shift, or Alt, and adjust pan & zoom sensitivity. It also introduces Pagination, Zoom Restore, Keyboard controls, and 3D axis modifications for greater flexibility.

// Right mouse click on Y axis title
chart.axisY.title.addEventListener('contextmenu', (event) => {}) // Drag & drop something over chart series area chart.seriesBackground.addEventListener('drop', (event) => {})
// Hover pointer over a data point
pointSeries.addEventListener('pointermove', (event, dataPoint) => {
})
// dataPoint.x, dataPoint.y, dataPoint.id

Visual Quality Improvements

Rounded corners in UI elements – Legends, cursors, rectangle series, bar charts, and treemap charts now feature rounded corners for a more modern and visually appealing design.

Axis tick layout and display improvements

• Fewer displayed ticks for clarity – The number of ticks has been reduced to minimize visual clutter while maintaining readability.

• Improved small-axis tick display – Previously, very small axes sometimes showed only one unreadable tick; now, the system optimizes tick placement for better visibility.

• Tick labels stay within chart bounds – By default, tick labels are now constrained within the chart container to prevent them from being cut off in compact chart layouts.

• Simplified tick label colors – Built-in themes now use a single uniform color for tick labels instead of separate dimmer/brighter variations, creating a cleaner look.

Read the full release note

[image]

LightningChart JS 7.0

Written by:
Omar Urbano | Software Engineer & Technical Writer
Send me your questions via LinkedIn