@arction/lcjs

LightningChart^® JS

LightningChart JS is a WebGL based, 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, both in 2D and 3D. The fastest rendering real JavaScript charting library.

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.
• Supports server side rendering (use with our @arction/lcjs-headless package)
• Chart types: 3D, XY, Heatmaps, Polar, Radar/Spider, Pie/Donut, Funnel, Gauge and Pyramid charts
• Linear and Logarithmic Axis for XY 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 GitHub. 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

The Community License is distributed with the NPM package in a LICENSE file and can also be found from: https://www.arction.com/lightningchart-js-eula-community/

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.

Commercial License

The Commercial License can be found from: https://www.arction.com/lightningchart-js-eula-commercial/

If you are using any other license than the Community License then the Commercial License applies.

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.

Application Deployment License

An application deployment license is required for deploying any application on other platforms than the web. See "Using a license" for how to use the application deployment license.

When using an application deployment license, the chart will render without the LightningChart JS logo.

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.

To use your LightningChart JS Application deployment license, you must also pass an object containing license information.

// Create an instance of LightningChart for creation of charts.
// ----- Application Deployment licensed version -----
const lc = lightningChart(myLicenseString, licenseInformationObject);

The licenseInformationObject is an object that implements AppDeploymentLicenseInformation interface.

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 },
]);