LightningChart JS logo

Lightning-fast, interactive & responsive 2D & 3D
JavaScript charts. When just fast isn’t enough.

Get the software
Buy license from $790 What’s new?
×
Package:
npm
Templates:
Angular Angular
React React
Vue.js Vue.js
Android Android
Blazor Blazor
Blazor Node.js headless
Blazor TypeScript
Blazor HTML
License & Pricing:
npm

Getting Started with LightningChart JS

There’s multiple ways to get started with our JS charting library. You can install the package from NPM or use IIFE bundle. You can use any of our Examples as a seed project and we’ve also created framework templates for you to utilize.

Getting started video

v.2.2.1

JS Interactive examples

Interactive Examples is an easy-to-use exploration tool to help you get started quickly with the most important concepts. In here you can search, view and edit charts on-the-fly.

API-links can be found conveniently right next to each example and below the chart example there is a link to the example’s GitHub page.

LightningChart JavaScript Charts Interactive Examples
JS Interactive examples API Documentation
LightningChart JavaScript Charts Interactive Examples

High-Performance JavaScript Charts

LightningChart JS is a WebGL based, cross-platform charting library that has been developed for delivering an outstanding performance of your 2D & 3D charts. Performance is up to TENS of MILLIONS of data points in real-time. In Dashboard cell resizing LC is an industry superlative: Rendering dozens or even 100+ charts simultaneously.

Optimal for demanding industries like engineering, healthcare engineering & medical devices, industrial process control and scientifical use.

Latest on JS Performance

Unmatched performance level

LightningChart JS comes with an unmatched execution performance. GPU acceleration & WebGL rendering ensure that your device’s graphics processor is utilized efficiently, which results in high refresh rates and smooth animations. This charting library combines incredible speed with sturdy load capacity. 

Learn more about LightningChart JS powerful performance levels by running our performance demo. It allows running the online test with any device, and instructions are included.

Performance Demo

Chart Types

XY Charts

×

XY Charts

  • Series types: Line and point series, area series, area range series, OHLC series, rectangles, ellipses, box-whisker and line segment series.
  • Linear axes can be placed left/right/top/bottom and possibility to have several X and Y axes per chart.
  • Scaling modes include fitting, Expansion, Progressive/ Regressive and Manual.
  • Markers and data cursors have customizable shape and styles.
Open Example

3D Charts

×

3D Charts

  • Series types: Line series, Point series, PointLine series, PointCloud series.
  • Customize the shape of the Bounding Box of the 3D Chart.
  • Linear Axes for X, Y and Z planes around Bounding Box of the 3D Chart.
  • Use Numeric and DateTime format with Axis ticks.
  • Camera can be controlled to rotate around and zoom in / out of the Chart area.
Open Example

3D Box Series

×

3D Box Series

  • Customizable with: value based coloring, solid coloring for all boxes, individual box colors.
  • Customize the roundness of the Box Shape edges.
Open Example

3D Surface Series

×

3D Surface Series

  • Customizable with: value based coloring, solid coloring, Data-Point based coloring.
  • Comes with customizable wireframe.
Open Example

Heatmaps

×

Heatmaps

  • Usable in XY Charts.
  • Create a 2D rectangular heatmap using the IntensityGrid option.
  • Create a 2D mesh Heatmap using the IntensityMesh option.
  • Use Heatmaps to create Spectrograms.
Open Example

Zoom Band Charts

×

Zoom Band Charts

  • Add a customizable, easy-to-use Zoom Band Chart to your XY Charts inside a Dashboard.
  • Shows an overview of detailed data of the attached charts.
  • Quick zooming with a band.
  • Automatically adds all Series inside the Axis it attaches to.
Open Example

Radar / Spider charts

×

Radar / Spider charts

  • Categorical automatically generated axes.
  • Round and lines grid.
  • Line, point and filled area series.
  • Scaling modes include fitting, expansion and manual.
  • Data cursors have customizable shape and styles.
Open Example

Pie / Donut charts

×

Pie / Donut charts

  • Series types: Line and point series, area series, area range series, OHLC series, rectangles, ellipses, box-whisker and line segment series.
  • Linear axes can be placed left/right/top/bottom and possibility to have several X and Y axes per chart.
  • Scaling modes include fitting, Expansion, Progressive/ Regressive and Manual.
  • Markers and data cursors have customizable shape and styles.
Open Example

Funnel Charts

×

Funnel Charts

  • Slices can be styled using different fill and stroke styles.
  • Slices can have empty gaps in between.
  • Fully customizable sorting and formatting of slices.
  • Labels can be set on side with connector lines or inside slices.
  • Two different ways to show the slices based on their values: Variable width and Variable height.
  • Slices can be animated. Changing values of slices, adding and removing slices support animations.
  • User can enable or disable animations for all slices.
Open Example

Gauge Charts

×

Gauge Charts

  • Gauge can be styled using different fill and stroke styles.
  • Set the thickness of the Gauge.
  • Gauge Slice can be styled using different fill styles.
  • Fully customizable formatting and styling of slices.
  • Customize the start and end angles of the gauge.
  • Customize the value interval of the gauge.
  • Gauge value change, interval and angle transitions and gauge dispose/restore are animated.
Open Example

Pyramid Charts

×

Pyramid Charts

  • Slices can be styled using different fill and stroke styles.
  • Slices can have empty gaps in between.
  • Fully customizable sorting and formatting of slices.
  • Labels can be set on side with connector lines or inside slices.
  • Slices can be animated. Changing values of slices, adding and removing slices support animations.
  • User can enable or disable animations for all slices.
Open Example

Intuitive User Experience

Dashboard

Easy and convenient to manage dozens of charts, legend boxes, buttons, check boxes and other UI elements. Resource-efficient rendering of all charts in one GPU scene also makes resizing columns and rows very fast.

Interactive Charts

JavaScript Charts with smooth animations exceeding all industry standards in amount of data per chart. Intuitive touch screen interactivity with zooming, panning, moving data cursors etc.

WebGL rendering

GPU acceleration & WebGL rendering ensure that your device’s graphics processor is utilized efficiently, which results in an outstanding execution performance.

Server side rendering

LightningChart JS supports Server side rendering. It can be used with our headless package available in npm. Use our charts in a server application to produce high-quality chart images.

Resources

With LightningChart JS you have an abundance of resources to get cosy with the library. API documentation, interactive examples and more – visit our resources page to access all this.

Resources page

License type

Community

FREE

Web Developer

$790

Application Developer

$2290

Enterprise

Quotation request

2D charts

3D charts

Web sites

Intranet servers

SaaS (web site requiring login)

Installable / Salable Applications, Desktop / Mobile / Embedded

Commercial use

LightningChart Logo Removed

Examples source code

Libraries source code available

Technical support

Deployment rights

Public web site

Per domain, see more.

Unlimited, royalty-free

Please ask us.

Check our pricing and licensing options

Features & Requirements

Check all the details regarding compatible web browsers, product features, compatible frameworks, chart types and
technical (e.g. internet connection, software and hardware) requirements.

Full features and technical requirements

Still not convinced?

Read our article and discover 5 reasons «Why LightningChart JS» should become your charting solution

LightningChart® JS Roadmap