Interactive examples, with code editing on-the-fly
More interactive examples
Performance results, with a typical desktop PC:
- Streaming, scrolling line series: 1 million data points: 60 FPS (repaints / sec)
- Streaming, scrolling area series: 1 million data points: 57 FPS (repaints / sec)
- OHLC candle-sticks: 1 million data points: 57 FPS (repaints / secs)
- GPU acceleration and WebGL rendering
- Intuitive touch screen interactivity with zooming, panning, moving data cursors etc.
- Dashboard control, capable of rendering 100+ charts.
- Chart types: XY, Radar/Spider, Pie/Donut, Funnel, Gauge and Pyramid charts
- Product page
- API documentation
- Free community license
- Performance tester
- Full features & technical requirements
- Stack Overflow
1. Install from NPM and use a bundler
Install the library package from NPM.
npm install --save @arction/lcjs
Check our getting started video on LightningChart JS to see this in action.
2. Use IIFE bundle directly on a webpage
The library is distributed with a browser ready IIFE bundle. This bundle can be used directly in browsers with script tag. You can see an example implementation of this method on our GitHub. LightningChart JS html usage example.
All of our examples can be used in the html page. To use them,
first find an example you want to use from interactive examples.
Edit this example. On the bottom of the page click on the button that reads
CJS. That will switch our code to be IIFE compatible.
After that, the code can be copied to the html page. See our LightningChart JS html usage example for more detailed information.
Non-commercial, Community License
When the library is used without a license, it will run with a LightningChart JS logo on the chart. The logo is a link to the LightningChart JS product page.
There is a small performance drop when the chart is running without a license key compared to running with a valid license.
A development license is required for development in a commercial environment. The license is verified with a license server. Internet connection is required for license verification. Each developer requires own development license. See "Using a license" for how to use the development license. When using a development key, the chart will just like it will in production.
A deployment license is required for commercial use. The deployment license is provided the same way as a development license. See "Using a license" for how to use the deployment license.
When using a deployment license, the chart will render without the LightningChart JS logo. The deployment license supports a "Deployment Test" domain. If the domain that the library is currently running in matches the deployment test domain specified with the deployment license, the chart will render with a "Deployment Test" text on top of the chart. This domain is meant to support using a staging environment and having the ability to switch to the production version without changing the license.
Different purchasing options can be found on our website.
This will be needed for every lcjs-application as it is required for creating Charts, Dashboards, LegendBoxes... Its usage is always the same:
// Import library.const lightningChart =// Create an instance of lightningChart for creation of charts.const lc =// Create charts using methods of 'LightningChart'-interface.const cartesianChart = lcconst spiderChart = lc// ...
Using a license
To use your LightningChart JS license, you must pass it as an argument to lightningChart, like so:
// Create an instance of LightningChart for creation of charts.// ----- Licensed version -----const lc =
myLicenseString can be either a development license for development or a deployment license for deployment.
Individual exports styles, settings, utilities, builders...
LightningChart® JS also includes a bunch of other exports for styling, configuring and interacting with charts, building different UI-elements and what-not. These can be imported from the lcjs module as required:
// Import required parts from LightningChart® JS module.constlightningChartColorRGBAAxisScrollStrategies// ...} =
Any entry listed in LightningChart® JS API Documentation is importable as in the previous example.
const lightningChart DataPatterns =// Create a cartesian chart.const chart =// Add a series for rendering a line optimized for progressing by X.const lineSeries = chart// Append point locations. (Note that selected Data Pattern expects them to be progressive by X)lineSeries