All Examples

Trading demo

Real-time scrolling

Static data speed test

Audio visualization

JavaScript Line Chart

Example showcasing the use of Line Series. Also known as Line Graph and Line Chart.

JavaScript Scatter Chart

Using a point series to display a Point Graph. Also known as a Scatter Graph, Scatter Series, Point Graph, Scatter diagram or Scattergram.

JavaScript Spline Line Chart

Example showing how to draw and style Spline Series.

JavaScript Point Line Chart

Basic use of Point Line Series. Also known as a Line Series, Line Graph, Line Chart, and Line with Markers.

1 Million Points JavaScript Line Chart

Example plotting a million data points using progressive Line Series.

JavaScript Step Series

Example showing the use of a Step Series with different preprocessing modes. Also known as a Step Graph or Step Chart.

JavaScript Point Clusters Chart

Example showing how to create clusters of differently colored points. Using Point Series.

Shared Axis

Shows how to combine multiple series in to one chart.

JavaScript Microseconds Line Chart

Example on how to deal with high-resolution data - for example, measurements in microseconds precision.

Several AxesXY

Several AxesXY chart can be used to compare or see several graphs.

Multi-channel real-time data monitoring JavaScript Chart

Lightning-fast Line Chart visualization over multiple channels that progress on the same X Axis

Custom ticks on scrolling X Axis

Custom tick positioning logic on a scrolling Axis.

JavaScript Time Ticks Chart

Example showcasing the TimeTickStrategy feature which is ideal for displaying timestamp data between couple days all the way down to microseconds level.

JavaScript Scrolling Time Ticks Chart

Example showcasing the TimeTickStrategy feature with scrolling data and axis

JavaScript High Precision Axis Chart

Example showcasing the High Precision Axis XY feature which allows zooming of microseconds precision without any dirty data transforming

JavaScript Confidence Ellipse Chart

Example showcasing visualization of XY confidence ellipse widely used in statistics field

JavaScript Chart with DateTime Axis

Example for creation of a DateTime Axis. DateTime axis can present time.

DateTime Axis Origin

Example showcases using origin with Axis TickStrategies.

JavaScript 2D Points Value Palette Coloring

Dynamic 2D points coloring by arbitrary user data set.

JavaScript Logarithmic Line Chart

Example showcasing logarithmic Axis with LineSeries.

JavaScript Grouped Bars with Logarithmic Y Axis

Example showcasing grouped bars chart with Logarithmic Y Axis

JavaScript OHLC Chart with Logarithmic Y Axis

Example showcasing OHLC series with a logarithmic Y axis

JavaScript Lasso Selection Chart

Example showcasing a custom ChartXY interaction for highlighting selected data points

JavaScript Area Range Chart

Example showcasing basic use of an Area Range Series. Also known as a Area Graph, Area Chart or Range Area Chart.

JavaScript Multiple Areas Chart

Basic usage of a Monopolar Area series. Also known as a Area Graph or Area Chart.

Area Bipolar JavaScript Chart

Basic usage of Bipolar Area Series. Also known as a Bubble Series, Bubble Chart and Bubble Graph.

Layered Areas JavaScript Chart

Layered Area Chart done by layering multiple Area Series on top of each other. Also known as a Layered Area Graph, Layered Area Chart or Multiple Area Charts.

JavaScript Stacked Mountains Chart

Stacked Charts are a popular visual aid for comparing parts of a whole. Also known as Stacked Area Graph or Stacked Areas.

Temperature Variations JavaScript Chart

The example shows the basic usage of Area Range series to display variation in temperature.

JavaScript ECG Chart

This example shows a simulated electrocardiogram(ECG)-signal by using a Line Series in a XY Chart.

JavaScript Candlestick Chart

This type of chart is used as a trading tool to visualize price movements. Also known as Japanese Candlestick Chart.

JavaScript OHLC Chart

Basic implementation of OHLC chart. Also known as Price Chart, Bar Chart.

JavaScript OHLC Chart with Automatic Packing

This example shows real-time OHLC-packing using a variant of OHLC-series.

JavaScript OHLC Chart with Automatic Packing Resolution

The examples purpose is to shed some light on the packing logic of OHLCSeriesWithAutomaticPacking. This is a variant of OHLCSeries.

JavaScript Vertical Bar Chart

Bar Charts show discrete numerical comparisons across categories, where the value represents the height of a bar. Also known as Bar Graph, Column Chart or Column Graph.

JavaScript Horizontal Bar Chart

Horizontal variant of a Bar Chart. Also known as Bar Graph, Column Chart or Column Graph.

JavaScript Grouped Bars Chart

Grouped bars for better categorizing than normal bar chart. Also known as Multi-set and Clustered Bar Chart.

JavaScript Span Chart

Also known as a Range Bar, Column Graph, Floating Bar Graph, Difference Graph, High-Low Graph.

JavaScript Mosaic Chart

Mosaic Chart can be used to compare observation counts of groups across different categories. Also known as Marimekko Chart.

JavaScript COVID-19 Tracker Chart

Bar chart race shows the dynamics of the Covid-19 spread.

JavaScript Static Spider Chart

This example shows the basic use of Spider Chart. Also known as Radar Chart, Web Chart, Polar Chart, Star Series.

Animated JavaScript Radar Chart

This example shows creation of a Radar Chart with animated transitions by using a suitably styled SpiderChart.

JavaScript Solid Gauge Chart

This example shows solid gauge chart.

JavaScript Pie Chart

Pie Chart (or a Circular Chart) is a chart used to show statistical graphic.

JavaScript Donut Chart

Donut Chart is a variation of Pie chart - functionally it's the same, visually it's only missing the center.

JavaScript Pie Chart with Lookup table

Example showcasing the use of Lookup Table with a Pie Chart.

JavaScript Funnel Chart

Funnel Chart is a chart used to show statistical graphic. Funnel Chart is divided into slices, with each slice illustrating the numerical portion of the Funnel.

JavaScript Pyramid Chart

Pyramid Chart is a chart used to show statistical graphic. The Pyramid chart is divided into slices, with each slice illustrating the numerical portion of the whole Pyramid.

JavaScript Dashboard With LegendBox

Example showing a dashboard with multiple chart types and LegendBox Panel.

JavaScript Dashboard 5 Channels 1000 pps

Example for a dashboard with multiple progressive channels of data. Using progressive Line Series.

JavaScript Trading Dashboard

This example shows the creation of a simple trading dashboard with multiple individual charts on a single pane.

JavaScript Business Dashboard

This example shows the specific business case to visualize the costs of a imaginary company across all the departments combined in a single interactive dashboard.

Dashboard 2 Channels 1000 pps

This example shows different progressive data-patterns, scrolling strategies, custom axes and function generators inside a dashboard.

Dashboard Multi-Direction

This example shows series/axes progressing to all kinds of directions inside a dashboard.

JavaScript Dashboard With Pie, XY, Spider and Donut Charts

This example shows different kinds of charts inside a dashboard.

JavaScript Distance Intensity Chart

This example showcases a real life application used in Fiber Analysis

JavaScript Zoom Band Chart

This example shows the creation of a Zoom Band Chart.

JavaScript Box and Whiskers Chart

Example creates a traditional Box and Whiskers Chart using ChartXY, BoxSeries and PointSeries for outliers.

JavaScript Box And Violin Chart

This example shows usage of BoxSeries in extravagant manner.

JavaScript Markers

This example shows usage of different Markers of the ChartXY environment.

JavaScript Chart Bands and Constant lines

This example shows usage of Bands and ConstantLines in XY Charts.

JavaScript Custom Cursor Chart

Example showcasing custom cursor implementation with LCJS UI

JavaScript Custom HTML Cursor Chart

Example showcasing custom cursor implementation with HTML & CSS

JavaScript Custom Cursor with Stacked Y Dashboard

Example showcasing custom cursor implementation with stacked Y charts

Customized JavaScript Chart - Bubbles

Using Ellipse Series as tool to create a Bubble Chart. Also known as a Bubble Series, Bubble Chart and Bubble Graph.

JavaScript Heatmap Grid Chart

Example showcasing simple usage of Heatmap Grid Series.

JavaScript Heatmap Mesh Chart

Example showcasing simple use-case for Mesh-type Heatmap

JavaScript Heatmap Spectrogram Chart

Example showcasing 2D audio analysis spectrogram with LightningChart JS

JavaScript Scrolling Heatmap Chart

Example showcasing simple usage of Scrolling Heatmap Grid Series

JavaScript Mesh Circle Chart

Example shows visualization of intensity in circle-based mesh chart.

JavaScript Spectrogram XY-Projection Chart

Example for Chart with 2D spectrogram + dynamic projections on mouse interaction.

JavaScript Sweeping Heatmap Chart

Example for Sweeping Heatmap Chart using HeatmapGridSeries

JavaScript Heatmap Bilinear Interpolation Chart

Example that showcases the pixel interpolation mode feature of 2D Heatmaps.

JavaScript 3D Scatter Chart

Example showcasing the use of 3D point series. Also known as scatter plot.

JavaScript 3D Line Series

Example showcasing the use of 3D Line Series.

JavaScript Spectrogram Surface 3D

Example showcasing the use of SurfaceGridSeries3D to render a scrolling 3D spectrogram.

JavaScript Spectrogram Box Series 3D

Example showcasing the use of BoxSeries3D to render a scrolling 3D spectrogram.

JavaScript 3D Simple Surface Grid

Example showcasing simple usage of 3D Surface Grid Series

JavaScript 3D Simple Surface Mesh

Example showcasing simple usage of 3D Surface Mesh Series

JavaScript 3D Box Series rounded edges

Example showcasing simple usage of BoxSeries3D and the rounded edges feature.

JavaScript 3D Realtime Scatter Chart

Example showcasing the use of 3D point series in a high performance application, with constantly changing data.

JavaScript 3D Realtime Line Chart

Example showcasing the use of 3D line series in a high performance application, with constantly changing data.

Polar Microphone Sensitivity JavaScript Chart

PolarChart showcase with LineSeries

JavaScript Polar Chart EM Field Strength

PolarChart showcase with AreaSeries

Map Chart

Simple overview of the Map Chart feature

Map Chart Dynamic Coloring

Example of using MapChart with real data set and dynamic region coloring

JavaScript Real-time Map Dashboard

Example on using MapChart with animated real-time data set