Improve Multi-Chart Display Performance
November 14, 2023
LightningChart JS v5.0 introduces WebGL context sharing to boost performance when displaying multiple charts.
LightningChart JS is a high-performance JavaScript charting library that utilizes WebGL rendering and GPU acceleration to deliver exceptional performance for a wide range of data visualization needs. It is designed to handle large datasets and complex visualizations with ease, enabling developers to create interactive and visually appealing charts for various applications.
The LightningChart JS v5.0 release introduces WebGL context sharing, enabling the sharing of WebGL resources (e.g. textures, shaders, and buffers) across multiple WebGL contexts. This enhances the performance of multi-chart displays, minimizes memory consumption, and simplifies resource management. It optimizes the rendering of each chart, regardless of their arrangement or quantity. Developers can now employ HTML <div> elements to define chart layouts and use CSS for precise control over positioning.
LightningChart JS v5.0.0
Released: Nov 8, 2023
Updates in v5.0.0
Features
- WebGL Context Sharing
- Introduced WebGL context sharing - Beginning with this release, users can define layouts using HTML <div> elements for each chart and position them using CSS. LightningChart JS optimizes the rendering of all charts irrespective of their positioning or number. This streamlines the integration of high-performance charts into intricate layouts and supports advanced features such as chart rearrangement, dynamic chart modifications, drill-down views, and mobile-friendly designs.
- More product features
- Individual result table fonts and colors - When hovering over data, the user can visualize a box with the results. It is now possible to customize each result with a different font or color style.
- More point-shape types - Added new point-shape and pointLineSeries including Arrow, Cross, Diamond, Minus, Plus, and Star types. These new types are also displayed in the attached legends.
- Auto cursors on Pie, Funnel, and Pyramid charts - With the new addition of auto cursors on pie chart slices, hovering the mouse over a slice will now display the corresponding slice values.
- Performance improvements
- Figure series optimizations - In this release, all figure series types including segment, rectangle, ellipse, and box series have received a performance boost. In the previous 4.0 release, the figure series loaded 1,000 boxes in 1.4 seconds at 10-20 FPS. In this release, the figure series can now load 10,000 boxes in only 0.5 seconds. Similarly, the FPS performance has improved to 60 FPS even when all the animations, cursor, zooming, and panning are enabled.
- Visual quality improvements
- Zoom band Chart - Reworked the Zoom band chart feature, offering users an enhanced experience with improved aesthetics. The data not showcased in the main chart is now subtly dimmed, ensuring users focus on the relevant data only. The interaction has been made intuitive with draggable "nibs", and users can effortlessly modify the view using the mouse wheel or by clicking on the zoom band chart. The API has also been streamlined, making it more robust and also user-friendly.
- Cursor Point Markers - When you hover, a small crosshair will now be displayed by default at the cursor's location. For those seeking customization, you have the flexibility to choose from various point shapes such as diamonds, circles, stars, squares, and more, ensuring a more tailored user interaction.
- Developer Experience Improvements
- Enhanced user experience - Introduced a new API which facilitates the direct input of timestamped heatmap samples, ensuring accurate data representation even if samples arrive out of sequence.
- Search bar for Dev Docs - You can now easily find what you are looking for by searching by word/term on the LightningChart JS Developer Documentation site.