# Lightweight Charts — High-Performance Financial Charting Library by TradingView

> A free, open-source JavaScript library for creating interactive, responsive financial charts with a tiny footprint. Built and maintained by TradingView for embedding professional candlestick, line, area, bar, and histogram charts in any web application.

## Install

Save as a script file and run:

# Lightweight Charts — High-Performance Financial Charting Library by TradingView

## Quick Use
```bash
npm install lightweight-charts
```
```js
import { createChart } from 'lightweight-charts';
const chart = createChart(document.getElementById('chart'), { width: 800, height: 400 });
const series = chart.addCandlestickSeries();
series.setData([
  { time: '2024-01-01', open: 100, high: 105, close: 103, low: 98 },
  { time: '2024-01-02', open: 103, high: 110, close: 108, low: 101 },
]);
```

## Introduction
Lightweight Charts is a compact, dependency-free charting library created by TradingView. It renders professional-grade financial charts using the HTML5 Canvas API, delivering smooth performance even with tens of thousands of data points on low-end hardware.

## What Lightweight Charts Does
- Renders candlestick, line, area, bar, histogram, and baseline chart types in a single library
- Handles time-series data with automatic time axis scaling and formatting
- Supports real-time streaming updates for live market data visualization
- Provides built-in crosshair, tooltips, and price/time scales with customizable formatting
- Runs entirely client-side with no server dependency or external CDN requirement

## Architecture Overview
The library is written in TypeScript and renders directly to an HTML5 Canvas element. A compositing layer manages multiple series on a single chart while the price and time scale renderers handle axis labels, gridlines, and coordinate mapping. Data updates trigger incremental redraws rather than full re-renders, keeping CPU usage minimal even during high-frequency streaming scenarios.

## Self-Hosting & Configuration
- Install via npm, yarn, or load standalone from a `<script>` tag with the UMD bundle
- Create a chart instance with `createChart(container, options)` specifying width, height, and layout preferences
- Configure price scale positioning (left, right, or both), time scale visibility, and grid colors via the options object
- Apply dark or light themes by setting `layout.background`, `layout.textColor`, and grid color properties
- Subscribe to click, crosshair move, and visible range change events for interactive dashboards

## Key Features
- Extremely small bundle size (around 45 KB gzipped) with zero runtime dependencies
- GPU-accelerated Canvas rendering handles 100K+ data points without jank
- First-class TypeScript support with complete type definitions for all APIs
- Plugin API allows custom series types, drawing tools, and pane primitives
- Framework-agnostic design works with React, Vue, Angular, Svelte, or vanilla JS

## Comparison with Similar Tools
- **Chart.js** — general-purpose charting; Lightweight Charts is specialized for financial time-series with native candlestick support
- **D3.js** — lower-level SVG/Canvas toolkit; Lightweight Charts provides ready-made financial chart components
- **Recharts** — React-only wrapper around D3; Lightweight Charts is framework-agnostic and Canvas-based
- **ApexCharts** — broader chart variety but larger bundle; Lightweight Charts trades breadth for speed and size
- **Highcharts Stock** — commercial license required; Lightweight Charts is fully open-source under Apache 2.0

## FAQ
**Q: Can I use Lightweight Charts in a React or Vue project?**
A: Yes. The library is framework-agnostic. Community wrappers exist for React, Vue, and Angular, or you can integrate directly using refs and lifecycle hooks.

**Q: Does it support real-time data streaming?**
A: Yes. Call `series.update(newBar)` to append or update the latest data point in real time without re-rendering the entire dataset.

**Q: Is it free for commercial use?**
A: Yes. Lightweight Charts is licensed under Apache 2.0, permitting commercial use with no royalties.

**Q: How does it handle large datasets?**
A: The Canvas renderer and internal data structures are optimized for large time-series. Charts with 100K+ bars remain smooth on modern browsers.

## Sources
- https://github.com/tradingview/lightweight-charts
- https://tradingview.github.io/lightweight-charts/

---
Source: https://tokrepo.com/en/workflows/asset-578d0519
Author: Script Depot