LightningChart JS Interactive Examples help

Front Page

This page shows a preview of a part of our charts. Rest of the charts can be accessed either with search action or by clicking the button "See all examples" at the bottom of this page.

Charts have been split into categories.

  • Dashboard: collections of different charts, suitable for showing different types of data at once or monitoring.
  • Trading: charts commonly used to show trading statistics
  • Statistics: examples showing data distribution
  • Line Series: charts with one or multiple lines
  • Area Series: different ways to display graphically quantative data
  • Heatmaps: data representation with color-coding
  • Bar Chart: charts using bars as a visualization method
  • Radial Charts: bar charts displayed on a polar coordinate system

Categories can be scrolled either by clicking arrows at the edges of the category or using indicator below category to select a chart. More information about a chart can be seen by hovering a tile.


Example page displays a live chart and information about the example. Chart editor can be accessed by clicking "Edit This Example" button below chart. Camera icon saves a screenshot of the present chart.

Tags describe chart types and components used in creating the example. Clicking a tag takes you to a search page including all charts with the same tag.

Below the chart is a link to the example's GitHub page. You can clone and install the example locally from there.


Live editor allows editing the chart and seeing the changes instantly. Chart refreshes when nothing has been edited in a couple of seconds.

More information about the functions can be seen by hovering a function name. This description also lists required variables for the function.

The editor also has some shortcuts, that can be accessed by either with using secondary click to open an options menu or by using keybinds listed below.

Key bindActionExplanation
Ctrl + F12Go to DefinitionMove editor to the place where the variable is defined
Alt + F2Peek DefinitionView and edit definition without moving
Shift + F12Peek ReferencesView and edit lines where variable is used
Ctrl + Shift + OGo to SymbolOpen a search bar for all variables used
F2Rename SymbolChange variable name for all occurrences in the editor
Ctrl + F2Change All OccurrencesChange variable name for all occurrences in the editor
Shift + Alt + FFormat DocumentTidy up the file
F1Command PaletteShow additional commands

With search you can quickly find different examples. If you do not select any of the suggested pages and press enter or click the search icon, you will be taken to a search page.

Search results are shown on the search page. If you hover on a result tile, you can see where the search parameter was found:

title In title
fingerprint In example ID
description In description
book In readme
code In code

You can also search charts by tags. Write "#" before the search parameter to search tags only. For example "#line" returns the tags line, spline, point-line and constantline. Clicking a tag will take you to a search page, which shows all examples matching the tag.


There are buttons in the navigation bar at the top line of the site.

Switch theme to one of many available themes
settings_applications Change settings

Available site settings include currently only "Disable Axis and Zooming Animations". This setting disables animations on charts, which may give a performance boost.