@arction/lcjs

LightningChart^® JS

LightningChart JS is a lightning-fast real-time data visualization charting library with a focus on exceptional performance. Performance testing results prove it’s able to visualize streaming data rates no other library for JS can. The fastest rendering chart library for JavaScript.

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)

Key features:

• 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

Useful links

• Product page
• Resources
• API documentation
• Free community license
• Performance tester
• Full features & technical requirements
• Stack Overflow

Installation

1. Install from NPM and use a bundler

Install the library package from NPM.

npm install --save @arction/lcjs

This package can be used with any bundler that supports CommonJS. Some examples of bundlers that work are WebPack, Parcel and Rollup.

Check our getting started video on LightningChart JS to see this in action.

Any of our Examples can be used as a seed project. All examples on that page have been made to standalone repositories which can be found on our GitGub. Standalone Example Repositories

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. Click 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.

License options

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.

Development 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.

Deployment License

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.

Purchasing

Different purchasing options can be found on our website.

Getting started

Javascript package

The library is distributed as a single javascript module. Its exports can be grouped to two categories:

lightningChart

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 } = require('@arction/lcjs')

// Create an instance of lightningChart for creation of charts.
const lc = lightningChart()

// Create charts using methods of 'LightningChart'-interface.
const cartesianChart = lc.ChartXY()
const spiderChart = lc.Spider()
// ...

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 = lightningChart(myLicenseString)

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.
const {
    lightningChart,
    ColorRGBA,
    AxisScrollStrategies
    // ...
} = require('@arction/lcjs')

Any entry listed in LightningChart® JS API Documentation is importable as in the previous example.

Example usage

const { lightningChart, DataPatterns } = require('@arction/lcjs')

// Create a cartesian chart.
const chart = lightningChart().ChartXY()

// Add a series for rendering a line optimized for progressing by X.
const lineSeries = chart.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive })

// Append point locations. (Note that selected Data Pattern expects them to be progressive by X)
lineSeries.add([
    { x: 0, y: 0 },
    { x: 20, y: 0 },
    { x: 45, y: -47 },
    { x: 53, y: 335 },
    { x: 57, y: 26 },
    { x: 62, y: 387 },
    { x: 74, y: 104 },
    { x: 89, y: 0 },
    { x: 95, y: 100 },
    { x: 100, y: 0 }
])