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.
Examples
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.
Editor
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 bind | Action | Explanation |
|---|---|---|
| Ctrl + F12 | Go to Definition | Move editor to the place where the variable is defined |
| Alt + F2 | Peek Definition | View and edit definition without moving |
| Shift + F12 | Peek References | View and edit lines where variable is used |
| Ctrl + Shift + O | Go to Symbol | Open a search bar for all variables used |
| F2 | Rename Symbol | Change variable name for all occurrences in the editor |
| Ctrl + F2 | Change All Occurrences | Change variable name for all occurrences in the editor |
| Shift + Alt + F | Format Document | Tidy up the file |
| F1 | Command Palette | Show additional commands |
Search
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:
In title
In example ID
In description
In readme
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.
Settings
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.