This demo application belongs to the set of examples for LightningChart JS, data visualization library for JavaScript.
LightningChart JS is entirely GPU accelerated and performance optimized charting library for presenting massive amounts of data. It offers an easy way of creating sophisticated and interactive charts and adding them to your website or web application.
The demo can be used as an example or a seed project. Local execution requires the following steps:
-
Make sure that relevant version of Node.js is installed
-
Open the project folder in a terminal:
npm install # fetches dependencies npm start # builds an application and starts the development server -
The application is available at http://localhost:8080 in your browser, webpack-dev-server provides hot reload functionality.
As proven in our 2021 line charts performance comparison, LightningChart JS line charts are over 700 times faster than other web charts. Especially in real-time applications LightningChart enables the creation of data visualization applications unlike anything seen before in web pages.
By default, this example will show a small dashboard that displays nine real-time trends.
However, the real treat is activated by pressing the "Click here to show full 10x10 dashboard" button inside the chart. This is intended for Desktop users, as the complete application requires quite a bit of space.
In its full size, the example shows 100 line charts. Each chart is connected to a real-time data source (random data), the sampling rate is 1 000 data points per second for every chart. This sums up to 100 000 processed data points per second.
In the previously mentioned performance comparison study we tested this kind of applications with the major manufacturers who claim their charts to be high-performance oriented or the fastest. The results showed that the wide majority of web charts are not applicable to real-time visualization of even as little as 1 000 data points per second.
Why not? Because the charts spend too much time processing this amount of data. This can be observed by the web page visibly slowing down, preventing users from interacting with their browser.
To learn more about LightningChart JS, here are some potentially interesting links:
(!) Using Dashboard is no longer recommended for new applications. Find latest recommendations here: https://lightningchart.com/js-charts/docs/basic-topics/grouping-charts/
- Dashboard
- XY cartesian chart
- Line series
- Axis
- Axis tick strategies
- Axis scroll strategies
- UI position origins
- UI layout builders
- UI element builders
- Solid FillStyle
- RGBA color factory
- Time formatting functions
If you notice an error in the example code, please open an issue on GitHub repository of the entire example.
Official API documentation can be found on LightningChart website.
If the docs and other materials do not solve your problem as well as implementation help is needed, ask on StackOverflow (tagged lightningchart).
If you think you found a bug in the LightningChart JavaScript library, please contact [email protected].
Direct developer email support can be purchased through a Support Plan or by contacting [email protected].
© LightningChart Ltd 2009-2025. All rights reserved.