LightningChart JS Full-Stack Examples

This repository contains high-performance LightningChart JS examples for modern web frameworks. It was created as a bachelor’s thesis for Savonia UAS and commissioned by LightningChart Ltd., with the goal of making LightningChart JS integration simpler for developers.

Quick Start

1. Environment Setup

A valid LightningChart JS license key is required for the charts to function.

1. Copy the .env.example file to a new file named .env in the project root.

2. Replace the placeholder with your actual license key:

   VITE_LCJS_LICENSE="123456789-ABC"

   You can find the license key on the following line of your license details: license: "123456789-ABC".

2. Installation

Install all workspace dependencies from the root folder:

npm install

Note: If you create the .env file after running npm install, or update the license key later, rebuild the framework bundles from the root folder:

npm run build-dependencies

3. Usage

The application can run in two modes:

A) Local mode

Local mode runs the full-stack application with a Node.js backend that stores data in SQLite and streams real-time data over WebSockets.

Start the backend, viewer, and framework build watchers:

npm run dev

Open the local URL shown in your terminal, usually localhost:5173.

B) Browser mode

Browser mode runs entirely in the browser using generated mock data, without requiring a backend or database.

Build all workspaces and serve the static application locally:

npm run build
npm run serve

The build is assembled in the root build/ directory and opens in your default browser.

4. Updating LightningChart JS

To install the latest version of LightningChart JS, run in the root folder:

npm run update-lcjs

If you need to target a specific version, pass the version number as an argument after a double dash (--):

npm run update-lcjs -- 9.0.0

Note: This project was developed using LightningChart JS v9.0.0. Earlier versions may not support all the APIs and features used in these examples.

Documentation for AI Assistants

The repository includes generated text files for Large Language Models (LLMs) and other AI assistants. These files make it easier to share the relevant source code without providing the entire repository. They are stored in /backend/llms and grouped by framework and project area. A combined version is also available in full.txt.

The files are regenerated automatically when running npm run dev or npm run build. You can also update them manually from the root folder:

npm run generate-llms

When the application is running in local mode, the documentation index is available at http://localhost:3000/llms.txt.

Repository Structure

• /backend: Express server, SQLite database setup, scenario API handlers.
• /build: Generated static application created by npm run build (not included in version control).
• /frameworks: Framework-specific frontend implementations of each scenario.
• /scripts: Utilities for generating AI documentation and updating LightningChart JS.
• /shared: Shared types, styles, scenario definitions, source data, and mock-data generators.
• /viewer: Main application for viewing and comparing the framework examples.
• build.js: Collects the workspace builds into the final static application.

Project Info

Created by Jenni Mikkonen as a bachelor’s thesis for Savonia UAS, commissioned by LightningChart Ltd.

• Try Full-Stack Examples online
• Learn more about LightningChart JS
• Explore LightningChart JS interactive examples