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
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
- Customizable with value based coloring, solid coloring for all boxes, individual box colors, and the roundness of the Box Shape edges.
- Supports dynamic coloring by x, y or z coordinates.
- 3D surface series
- Customizable with: value based coloring, solid coloring, Data-Point based coloring.
- 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
- 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