Lightweight Charts

TradingView Lightweight Charts™ — performant financial charts built with HTML5 canvas

1 — 概要
位置づけ

Lightweight Charts は、TradingView が公開する HTML5 Canvas ベースの金融チャート用ライブラリ。バンドルサイズを抑えつつインタラクティブなローソク・ライン・ヒストグラムなどを描画し、静的画像の置き換えやダッシュボード向けに使われる。リポジトリ内 package.json の説明は「Performant financial charts built with HTML5 canvas」。

Canvas描画レイヤー
TypeScript型付き API
fancy-canvasruntime 依存
Apache-2.0ライセンス

公式ドキュメント・デモは GitHub Pages。プラグイン例は plugin-examples を参照。

2 — リポジトリ構成
ソースの置き場

実装の中心は src/。公開 API は src/index.ts から再エクスポートされ、createChart / 各種シリーズ定数、ウォーターマーク・マーカー等のプラグイン、version() がエントリとしてまとまる。

  • src/api/ — チャート生成（create-chart など）とホスト向け API。
  • src/model/ — 時系列・価格スケール・シリーズ状態などドメインモデル。
  • src/renderers/ — Canvas 上への描画ロジック。
  • src/views/ / src/gui/ — ビューと操作系（クロスヘア等）。
  • src/plugins/ — テキスト／画像ウォーターマーク、シリーズマーカー等。

最小の利用フロー（概念）は次のとおり。

flowchart LR A["createChart(container, options)"] --> B["IChartApi"] B --> C["addSeries(SeriesType)"] C --> D["ISeriesApi"] D --> E["setData / update"] E --> F["Canvas 描画・インタラクション"]

src/index.ts では、用途別に createYieldCurveChart・createOptionsChart などもエクスポートされている（イールドカーブ・オプション向けチャート）。

3 — 導入と API
npm（ESM）

README では npm install lightweight-charts のあと、名前付きインポートで createChart とシリーズ型（例: LineSeries）を取り、addSeries → setData と続ける。

import { createChart, LineSeries } from 'lightweight-charts';

const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addSeries(LineSeries);
lineSeries.setData([
  { time: '2019-04-11', value: 80.01 },
  { time: '2019-04-12', value: 96.63 },
]);
CDN（スタンドアロン）

unpkg 等のスタンドアロン JS は window.LightweightCharts を生成する。README の例では LightweightCharts.createChart と LightweightCharts.LineSeries を使用。

const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addSeries(LightweightCharts.LineSeries);
lineSeries.setData([/* ... */]);
シリーズ種別（export より）

src/index.ts からエクスポートされるシリーズには、LineSeries、BaselineSeries、AreaSeries、BarSeries、CandlestickSeries、HistogramSeries などがある。カスタムシリーズ向け型（ICustomSeriesPaneView 等）も定義される。

4 — ビルド種別
README のマトリクス

依存の同梱可否・開発／本番・ESM／IIFE の組み合わせで出力ファイル名が分かれる。スタンドアロンは fancy-canvas 等を同梱し、IIFE は window.LightweightCharts 用。

依存同梱モードES moduleIIFE（window.LightweightCharts）
なしPRODlightweight-charts.production.mjs—
なしDEVlightweight-charts.development.mjs—
あり（standalone）PRODlightweight-charts.standalone.production.mjslightweight-charts.standalone.production.js
あり（standalone）DEVlightweight-charts.standalone.development.mjslightweight-charts.standalone.development.js

package.json の exports["."] では、development / production 条件で import 先の .mjs が切り替わる。

5 — 拡張・ライセンス・表記
プラグインとサンプル

README では、標準機能に加え カスタムプラグイン で拡張できるとしている。リポジトリには plugin-examples/・indicator-examples/・packages/create-lwc-plugin があり、公式のインタラクティブ例へのリンクが案内されている。

createTextWatermark · createImageWatermark · createSeriesMarkers · createUpDownMarkers

いずれも src/index.ts からエクスポートされるヘルパ。

Apache 2.0 とクレジット: LICENSE に従うこと。README では TradingView を製作者として明記し、NOTICE の attribution と tradingview.com へのリンクを、ユーザー向けに利用可能なページに載せることが求められる。チャート上では attributionLogo レイアウトオプションでリンク表示を満たせる旨が記載されている。
公式・関連