Trading Charts

    JavaScript Real-Time Trading Dashboard

    Next-generation intensive trading application example with LightningChart

    JavaScript Ultra Precision Trading Chart

    Next-generation Fintech charts in web. LightningChart JS supports plotting of even 1 microsecond resolution data

    JavaScript Trading Dashboard

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

    JavaScript Data Gaps Trading Chart

    Example showcasing how data gaps can be handled XY series. Particularly highlights line and area series in a trading use case

    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 with Logarithmic Y Axis

    Example showcasing OHLC series with a logarithmic Y axis

    JavaScript OHLC Chart with Automatic Packing

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

    JavaScript OHLC Chart

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

    Research & Medicine Charts

    JavaScript Medical Dashboard

    Example of a Medical Dashboard with ECG/EKG, blood pressure, flow volume and oxygen saturation.

    JavaScript Flow Cytometry Chart

    Visualization of a Flow Cytometry data set (FSC + SSC properties)

    JavaScript ECG Chart

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

    JavaScript Heatmap Spectrogram Chart

    Example showcasing 2D audio analysis spectrogram with LightningChart JS

    Statistics Charts

    JavaScript Confidence Ellipse Chart

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

    JavaScript 3D Confidence Ellipsoid Chart

    Example showcasing 3D variant of popular 2D statistics data visualization method of confidence ellipses

    JavaScript Box And Violin Chart

    This example shows usage of BoxSeries in extravagant manner.

    JavaScript Grouped Bars Chart

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

    JavaScript Horizontal Bar Chart

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

    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 Box and Whiskers Chart

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

    JavaScript Mosaic Chart

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

    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.

    Business & Finance Charts

    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.

    JavaScript Dashboard With Pie, XY, Spider and Donut Charts

    This example shows different kinds of charts inside a dashboard.

    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.

    Geographical Charts

    JavaScript Drill-Down CoVID Map Dashboard

    In-depth example of map dashboard with data drill-down. Visualizes relations between CoVID vaccinations and cases

    JavaScript Animated CoVID Vaccination Coverage Chart

    Animated map chart that visualizes the progression of first round of CoVID-19 vaccination coverage per country

    JavaScript Animated Geographical Temperature Chart

    Example on geographical data visualization by laying a 2D heatmap over a picture of a map.

    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

    Map Chart

    Simple overview of the Map Chart feature

    LiDAR Charts

    3D LiDAR Park Visualization

    Example showcasing visualization of a 3D LiDAR scanned park with over million data points

    3D LiDAR Topography Visualization

    Example showcasing the visualization of LiDAR scanned 3D topography

    Surface Charts

    JavaScript 3D Surface Grid Chart

    Example showcasing the Surface Grid Series feature of LightningChart JS.

    JavaScript Audio Spectrogram 2D & 3D Chart

    Example showcasing the Surface Scrolling Grid Series feature of LightningChart JS.

    JavaScript Intensity Surface Grid Chart

    Example showcasing the Surface Grid Series feature of LightningChart JS with separate data sets for height and Intensity

    JavaScript Chunked Surface Grid Chart

    Example showcasing how large Surface Charts can be loaded in several small parts instead of 1 large data set

    JavaScript Surface Partial Invalidation Chart

    Example showcasing the partial data invalidation feature of Surface Grid Series

    JavaScript 3D Simple Surface Mesh

    Example showcasing simple usage of 3D Surface Mesh Series

    3D Box, Point & Line Charts

    JavaScript 3D Box Series rounded edges

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

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

    JavaScript Spectrogram Box Series 3D

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

    Line Charts

    JavaScript Large Line Chart

    Example visualization of large line chart (several million data points)

    Multi-channel real-time data monitoring JavaScript Chart

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

    1 Million Points JavaScript Line Chart

    Example plotting a million data points using progressive Line Series.

    JavaScript Decaying Line Chart

    Showcases Line Chart with refreshing data, where older samples are displayed for a while, slowly decaying out.

    JavaScript Temperature Anomaly Chart

    Visualization of Temperature Anomaly Index and CO2 amount for period from 1880 to 2020. Showcases animated video icons

    JavaScript ECG Chart with Highlighted Beats

    Example showcasing Line Series feature for coloring line dynamically based on X coordinates

    JavaScript Good/Bad Values Threshold Line Chart

    Example showcasing Line Series feature for coloring line dynamically based on Y coordinates

    JavaScript Racecar Track Data Analysis Chart

    Example showcasing Line Series feature for coloring line dynamically based on separate Value data set

    Refreshing Spectrum Line JavaScript Chart

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

    JavaScript Logarithmic Line Chart

    Example showcasing logarithmic Axis with LineSeries.

    JavaScript Microseconds Line Chart

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

    JavaScript Line Chart

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

    Dashboard 2 Channels 1000 pps

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

    Multi-channel real-time data monitoring JavaScript Chart

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

    JavaScript Point Line Chart

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

    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 Spline Line Chart

    Example showing how to draw and style Spline Series.

    Point Charts

    JavaScript Large Scatter Chart

    Example visualization of large scatter chart (> million data points)

    JavaScript Confidence Ellipse Chart

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

    JavaScript 2D Points Value Palette Coloring

    Dynamic 2D points coloring by arbitrary user data set.

    JavaScript Lasso Selection Chart

    Example showcasing a custom ChartXY interaction for highlighting selected data points

    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 Point Clusters Chart

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

    Heatmap Charts

    JavaScript Heatmap Grid Chart

    Example showcasing simple usage of Heatmap Grid Series.

    JavaScript Spectrogram XY-Projection Chart

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

    JavaScript Distance Intensity Chart

    This example showcases a real life application used in Fiber Analysis

    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 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 Heatmap Mesh Chart

    Example showcasing simple use-case for Mesh-type Heatmap

    JavaScript Mesh Circle Chart

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

    Area & Range Charts

    JavaScript Multiple Areas Chart

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

    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.

    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.

    Bar Charts

    JavaScript COVID-19 Tracker Chart

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

    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 Grouped Bars Chart

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

    JavaScript Grouped Bars with Logarithmic Y Axis

    Example showcasing grouped bars chart with Logarithmic Y Axis

    JavaScript Span Chart

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

    JavaScript Horizontal Bar Chart

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

    JavaScript Mosaic Chart

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

    Polar Charts

    Polar Microphone Sensitivity JavaScript Chart

    PolarChart showcase with LineSeries

    JavaScript Polar Chart EM Field Strength

    PolarChart showcase with AreaSeries

    Pie, Spider & Gauge Charts

    JavaScript Pie Chart

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

    JavaScript Static Spider Chart

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

    JavaScript Solid Gauge Chart

    This example shows solid gauge chart.

    JavaScript Donut Chart

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

    Animated JavaScript Radar Chart

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

    JavaScript Pie Chart with Lookup table

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

    JavaScript Dashboard With Pie, XY, Spider and Donut Charts

    This example shows different kinds of charts inside a dashboard.

    Axis & Ticks Examples

    Shared Axis

    Shows how to combine multiple series in to one chart.

    JavaScript Scrolling Time Ticks Chart

    Example showcasing the TimeTickStrategy feature with scrolling data and axis

    JavaScript OHLC Chart with Logarithmic Y Axis

    Example showcasing OHLC series with a logarithmic Y axis

    JavaScript Chart with DateTime Axis

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

    JavaScript High Precision Axis Chart

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

    Custom ticks on scrolling X Axis

    Custom tick positioning logic on a scrolling Axis.

    Several AxesXY

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

    JavaScript Visible Fitting Y Axis Chart

    Example how Y axis fitting to visible data can be achieved in scrolling line chart applications

    Dashboards

    JavaScript Dynamic Chart Dashboard

    Example on how a dynamic chart dashboard can be created with LightningChart JS

    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 Zoom Band Chart

    This example shows the creation of a Zoom Band Chart.

    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.

    JavaScript Dashboard With Pie, XY, Spider and Donut Charts

    This example shows different kinds of charts inside a dashboard.

    JavaScript Dashboard With LegendBox

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

    Dashboard 2 Channels 1000 pps

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

    JavaScript Distance Intensity Chart

    This example showcases a real life application used in Fiber Analysis

    Dashboard Multi-Direction

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

    Other

    JavaScript Office Layout Data Visualization Chart

    Example showcasing LightningChart interactions with external images and icons in context of office layout data visualization.

    JavaScript Custom HTML Cursor Chart

    Example showcasing custom cursor implementation with HTML & CSS

    JavaScript Chart Bands and Constant lines

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

    JavaScript Markers

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

    JavaScript Custom Color Theme ChartXY

    Example on ChartXY with Custom Color Theme

    JavaScript On Screen Menu

    On Screen Menu showcase

    See All Examples