LightningChart JS®

Full features and technical requirements

LightningChart JS v.3.1.0 features

  • Optimized for real-time data visualization and high-speed streaming data
  • Fully GPU accelerated (WebGL)
  • Zooming and panning, with mouse and touch-screen
  • Dashboard to manage layout of several charts and resize them:
    • – Resource-efficient rendering of all charts in one GPU scene
    • – Columns and rows definition
    • – Objects column and row spans definition
    • – Columns and rows can be resized with built-in splitters
    • – Cells for UI Elements and Legends
  • Legend boxes
  • High DPI rendering support
  • Server side rendering
  • Support for Application / Intranet deployment
  • Themes 
    • Use themes to quickly style the look of your charts / dashboard 
    • Multiple preset themes, such as ‘dark’, ‘light’, ‘auroraBorealis’ to choose from
    • Customize themes or make your own from scratch
  • All common transitions have toggleable, fluid animations
  • Develop with  JavaScript or TypeScript
  • Example templates available for the following frameworks and solutions:
    • Android
    • React
    • Angular
    • Vue.js
    • Blazor
    • Node.js headless server side application
    • TypeScript
    • HTML
    • ASP.NET
    • iOS
    • Uno Platform
    • Electron
    • Xamarin
features-requirements-icon

Chart types

XY cartesian charts

  • Rectangle series: rectangles with border, e.g. for making bar charts and time-span charts
  • Ellipse series: simple ellipses with borders and two radiuses
  • Box-whisker series: box and whiskers for statistical data
  • Line segment series: Efficient way e.g. to render vertical or horizontal line segments.
Linear axes
  • Placement on left/right/top/bottom
  • Several X and Y axes / chart
  • Numeric scale with labels formatters
  • Date-Time scale
  • Optional title of Axis
  • Custom ticks: Gridline + tick marker + label
  • Scaling modes:
    • – Fitting
    • – Expansion
    • – Progressive/ Regressive
    • – Manual
  • Animated scrolling, zooming and fitting
Logarithmic Axes
  • Can be used with Numeric TickStrategies as well as DateTime TickStrategies.
  • Base number can be set per Axis by users.
  • Available with XY charts, supported series types: Line, Point, PointLine, Step, Spline, Area, AreaRange, Rectangle, Segment and OHLC.
Line and point series
  • Line series, arbitrary
  • Points series (scatter plot) + individual points coloring
  • Point-line series, arbitrary, with points + individual points coloring
  • Spline line plot + individual points coloring
  • Step line series: before / middle / after step alignments + individual points coloring
  • Progressive and regressive line series: vertical and horizontal
  • Automatic data cursor as default, and customizable cursors
Area series
  • Modes:
    – Monopolar: positive /negative directions from specified base level
    – Bipolar: both directions from specified base level
  • Fill and line style
  • Automatic data cursor as default, and customizable cursors
  • Progressive and regressive area series: horizontal
Area range series
  • Each filled position given defined with high and low value
  • Fill and line style for non-reversed and reversed states
  • Automatic data cursor as default, and customizable cursors
  • Progressive and regressive area range series: horizontal
OHLC series
  • Data input as Open-High-Low-Close, or XY-points
  • Visualization as candle-sticks and bars
  • Automatic packing based on resolution
Markers
  • Tracking point
  • Hair-cross lines
  • Labels on axes
  • Label on tracking point
  • Customizable shape and styles
Data cursors
  • Finds nearest series
  • Tracks interpolated data value
  • Tracks nearest data value
  • Tracking point
  • Hair-cross lines
  • Labels on axes
  • Label on tracking point
  • Customizable shape and styles
UI Elements
  • Label
  • Button
  • Checkbox
  • Row (Horizontal stacked panel)
  • Column (Vertical stacked panel)
  • All UI Elements can be dragged with mouse and touch

Advanced 3D Charts

  • Series types: Line series, Point series, PointLine series, PointCloud series, Box series, Surface 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.
  • 3D box series
    1. Customizable with value based coloring, solid coloring for all boxes, individual box colors, and the roundness of the Box Shape edges.
    2. Supports dynamic coloring by x, y or z coordinates.
  • 3D surface series
    1. Customizable with: value based coloring, solid coloring, Data-Point based coloring.
    2. Comes with customizable wireframe.

Map Charts

  • Can be used as a stand-alone Chart component or placed inside a Dashboard.
  • Supports following views: World, USA, North America, South America, Canada, Europe, Asia, Africa and Australia.
  • Supports Auto Cursor feature for displaying region data with mouse.
  • Can be colored with solid color for entire map, or with dynamic color per region.
  • Supports LUT UI element for visualizing dynamic color table.
  • Supports real-time updates.

Polar Charts

  • Series Types (all stylable with familiar API): Line series, Point series, PointLine series, Polygon series and Area series.
  • Polar Sectors (easily stylable with familiar API). Highlight a section of the Polar Chart with ease.
  • Can be rotated via API.
  • AutoCursor is available for Polar Charts.
  • Can be used as a stand-alone Chart, or in a Dashboard.

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

Zoom Band Charts

  • Add a customizable, easy-to-use Zoom Band Chart to your XY Charts inside a Dashboard.
  • Automatically adds all Series inside the Axis it attaches to.
  • Also automatically follows the Scale of the Axis it is attached to.
  • Can be interacted with, and can be used to change the View in the Chart that it is attached to.

Spider / radar charts

  • Categorical automatically generated axes
  • Round and lines grid
  • Line, point and filled area series:
    • – Spider chart value transitions as well as disposing/restoring are animated
  • Data cursors
  • Scaling modes:
    • – Fitting
    • – Expansion
    • – Manual

Pie / donut charts

  • Slices can be styled using different fill and border-styles
  • Fully customizable sorting and formatting of Slices
  • Slice value transitions as well as disposing/restoring are animated
  • Two designs:
    • – Labels on side with connector-lines
    • – Labels inside Slices
  • Slices can be “exploded” programmatically or by mouse/touch

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.

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.

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.

Library distribution channels

LightningChart JS is available as: 

  • NPM package, JavaScript, TypeScript typings included 
  • IIFE JavaScript library for including in traditional HTML page, TypeScript typings included in the downloadable archive in the Customer Portal 

Technical requirements

Software
Compatible web browsers tested by Arction Dec 2018:

  • Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera, Yandex, Baidu, Maxthon, Sogou, 360 chrome, QQ, Liebao / Cheetah

LightningChart JS from v2.0.0 onwards requires the following WebGL extensions to work properly:

  • ANGLE_instanced_arrays
  • EXT_blend_minmax
  • OES_element_index_uint
  • OES_standard_derivatives
  • OES_vertex_array_object
  • WEBGL_lose_context
Hardware

WebGL 1.0 compatible graphics hardware, with lately updated drivers/software

Internet connection requirements

Development

  • Development with a  Commercial development key, requires internet connection for license key checking
  • Community license currently doesn’t currently require internet connection in development.

Deployment

Deployment means “Running the final application”.

The application with LC JS binaries can be deployed to:

  • Community license and Commercial license: public web site - internet connection is required
  • Commercial
    • internal solution in internet or cloud: internet connection is required.
    • Internal solution in local area network: local area network connection is required. 

Interested in LightningChart® JS for commercial use?
Check our pricing and licensing options