# LightningChart<sup>®</sup> JS - World's Fastest JavaScript Charts

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

<p align="center">
  <a href="https://www.arction.com/lightningchart-js/">
    <img src="https://www.arction.com/npm-material/Cover-npm.png"/>
  </a>
</p>

## Interactive examples, with code editing on-the-fly

Whether you are first learning about LightningChart, investigating if it suits your needs or starting with your own application development [**our interactive examples application**](https://www.arction.com/lightningchart-js-interactive-examples/) is the place to start from.

Click [here](https://www.arction.com/lightningchart-js-interactive-examples/) to browse almost all LightningChart JS features, interact with the charts, test the performance and see how the code looks.

<table>
  <tbody>
    <tr>
      <td>
        <a href="https://arction.github.io/lcjs-showcase-trading">
          <img src="https://www.arction.com/npm-material/1a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://arction.github.io/lcjs-showcase-renderingSpeed">
          <img src="https://www.arction.com/npm-material/2a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://arction.github.io/lcjs-showcase-audio/">
          <img src="https://www.arction.com/npm-material/6a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0010-multiChannelLineProgressive.html">
          <img src="https://www.arction.com/npm-material/3a.jpg" />
        </a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0800-heatmapGrid.html">
          <img src="https://www.arction.com/npm-material/5a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-1110-geoChartUsaTemperature.html">
          <img src="https://www.arction.com/npm-material/14a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0900-3dScatter.html">
          <img src="https://www.arction.com/npm-material/11a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0913-surfaceScrollingGrid.html">
          <img src="https://www.arction.com/npm-material/7a.jpg" />
        </a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0907-3dBoxRounded.html">
          <img src="https://www.arction.com/npm-material/10a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0910-3dLiDARPark.html">
          <img src="https://www.arction.com/npm-material/9a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-1002-polarEMFieldStrength.html">
          <img src="https://www.arction.com/npm-material/15a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0805-spectrogramProjection.html">
          <img src="https://www.arction.com/npm-material/12a.jpg" />
        </a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0801-heatmapMesh.html">
          <img src="https://www.arction.com/npm-material/13a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-1102-mapChartTimeline.html">
          <img src="https://www.arction.com/npm-material/8a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0806-sweepingHeatmapGrid.html">
          <img src="https://www.arction.com/npm-material/4a.jpg" />
        </a>
      </td>
      <td>
        <a href="https://www.arction.com/lightningchart-js-interactive-examples/">
          <img src="https://www.arction.com/npm-material/16a.jpg" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

More [interactive examples](https://www.arction.com/lightningchart-js-interactive-examples/)

## Useful links

-   [Product page](https://www.arction.com/lightningchart-js/)
-   [Comparison to other JavaScript charts](https://www.arction.com/high-performance-javascript-charts/)
-   [Resources](https://www.arction.com/lightningchart-js-resources/)
-   [API documentation](https://www.arction.com/lightningchart-js-api-documentation/)
-   [Free community license](https://www.arction.com/community-license/)
-   [Performance tester](https://www.arction.com/lightningchart-js-performance/)
-   [Full features & technical requirements](https://www.arction.com/lightningchart-js-full-features/)
-   [Stack Overflow](https://stackoverflow.com/questions/tagged/lightningchart)

**Performance comparison**:

We have made multiple comparisons of LightningChart® JS against other popular JavaScript charting libraries.
[Check all of the comparisons and find out how we got the results here](https://www.arction.com/high-performance-javascript-charts/)

**Some performance results**, with a typical desktop PC:

-   **Static line series**: 10 million data points in 330 ms
-   **Scrolling line series**: 10 channels with 10 kHz input frequency (100 thousand new data points per second) FPS 60 and CPU usage 21%
-   **Heat maps**: 25000x25000 heat map can be loaded in less than 5 seconds 
-   **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 [@lightningchart/lcjs-headless package](https://www.npmjs.com/package/@lightningchart/lcjs-headless))
-   Chart types: 3D, XY, Heatmaps, Polar, Radar/Spider, Pie/Donut, Funnel, Gauge and Pyramid charts
-   Linear and Logarithmic Axis for XY Charts

## Installation

### 1. Install from NPM and use a bundler

Install the library package from [NPM](https://www.npmjs.com/package/@lightningchart/lcjs).

`npm install --save @lightningchart/lcjs`

This package can be used with any bundler that supports CommonJS. Some examples of bundlers that work are [WebPack](https://webpack.js.org/), [Parcel](https://parceljs.org/) and [Rollup](https://rollupjs.org/guide/en).

Check our [getting started video](https://www.arction.com/lightningchart-js-faq/) on LightningChart JS to see this in action.

Any of our [Examples](https://www.arction.com/lightningchart-js-interactive-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](https://github.com/Arction?utf8=%E2%9C%93&q=lcjs-example&type=&language=)

### 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](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage). You can see an example implementation of this method on our GitHub. [LightningChart JS html usage example.](https://github.com/Arction/lcjs-html-example)

All of our [examples](https://www.arction.com/lightningchart-js-interactive-examples/) can be used in the html page. To use them,
first find an example you want to use from [interactive examples](https://www.arction.com/lightningchart-js-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](https://github.com/Arction/lcjs-html-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](#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](#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](#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](https://www.arction.com/lightningchart-js-pricing/).

## 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:

```javascript
// Import library.
const { lightningChart } = require("@lightningchart/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();
// ...
```

<br/>

##### Using a license

To use your _LightningChart JS_ license, you must pass it as an argument to _lightningChart_, like so:

```javascript
// 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.

```javascript
// 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.

<br/>

#### 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:

```javascript
// Import required parts from LightningChart® JS module.
const {
    lightningChart,
    ColorRGBA,
    AxisScrollStrategies,
    // ...
} = require("@lightningchart/lcjs");
```

Any entry listed in _LightningChart® JS API Documentation_ is importable as in the previous example.

### Example usage

```javascript
const { lightningChart } = require("@lightningchart/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: {
    pattern: 'ProgressiveX'
  }
});

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