はじめに
金融系のチャートを実装するとき、選択肢って意外と悩むんですよね。Chart.jsは汎用的だけどキャンドルスティックには向いてないし、D3.jsは自由度が高すぎて実装コストがかかる。
そんなとき見つけたのがLightweight Charts。TradingViewが開発している金融チャート特化のライブラリで、GitHubスター数1万3千超え、月間83万ダウンロードという実績を持っています。
個人的に「これは良い」と思ったのは、わずか35KBという軽量さ。金融チャートってデータ量も多くなりがちなので、ライブラリ自体が軽いのはかなりありがたいです。
特徴・メリット
圧倒的な軽量さ
Lightweight Chartsの最大の特徴は、その名の通り軽量であること。ミニファイ+Gzip圧縮で約35KB。同種のライブラリと比べるとかなり小さいです。
ページの読み込み速度に影響を与えない設計になっているので、複数のチャートを並べて表示するようなケースでも安心して使えます。
HTML5 Canvas ベースの高速描画
Canvas技術を使っているため、数千本のローソク足があってもスムーズに描画できます。リアルタイムのストリーミング更新にも対応しているので、取引所のリアルタイムデータを流し込むような用途にもバッチリです。
6種類の金融チャートタイプ
金融チャートに必要なタイプは一通り揃っています。
- Candlestick(ローソク足): 株価やFXの定番
- Line(折れ線): シンプルな価格推移表示
- Area(エリア): 塗りつぶしで視覚的に分かりやすい
- Bar(バー): 高値・安値・始値・終値を表示
- Baseline(ベースライン): 基準線からの乖離を表示
- Histogram(ヒストグラム): 出来高表示などに
TradingViewの信頼性
開発元がTradingViewというのは大きな安心材料ですね。4万社以上の企業と1億人以上のトレーダーに使われているプラットフォームを作っている会社なので、金融チャートのノウハウは間違いありません。
Apache License 2.0
商用利用OKのApache License 2.0で公開されています。ただし、TradingViewへのリンク表記が必要になる点は注意が必要です。
インストール方法
npm経由(推奨)
npm install lightweight-charts
TypeScriptの型定義も含まれているので、そのまま使えます。
CDN経由
手軽に試したいならCDNでも。
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
CDNの場合はwindow.LightweightChartsとしてアクセスできます。
基本的な使い方
シンプルな折れ線チャート
まずは一番シンプルな例から。
import { createChart, LineSeries } from 'lightweight-charts';
// コンテナ要素を指定してチャート作成
const chart = createChart(document.getElementById('chart'), {
width: 600,
height: 400,
});
// ラインシリーズを追加
const lineSeries = chart.addSeries(LineSeries);
// データを設定
lineSeries.setData([
{ time: '2024-01-01', value: 100 },
{ time: '2024-01-02', value: 105 },
{ time: '2024-01-03', value: 102 },
{ time: '2024-01-04', value: 110 },
{ time: '2024-01-05', value: 108 },
]);
これだけでインタラクティブなチャートが完成します。ズームやパンも標準で動作するのが嬉しいところ。
ローソク足チャート
金融チャートの本命、キャンドルスティック。
import { createChart, CandlestickSeries } from 'lightweight-charts';
const chart = createChart(document.getElementById('chart'), {
width: 800,
height: 500,
layout: {
background: { color: '#1a1a2e' },
textColor: '#d1d4dc',
},
grid: {
vertLines: { color: '#2B2B43' },
horzLines: { color: '#2B2B43' },
},
});
const candleSeries = chart.addSeries(CandlestickSeries, {
upColor: '#26a69a',
downColor: '#ef5350',
borderVisible: false,
wickUpColor: '#26a69a',
wickDownColor: '#ef5350',
});
candleSeries.setData([
{ time: '2024-01-01', open: 100, high: 105, low: 98, close: 103 },
{ time: '2024-01-02', open: 103, high: 108, low: 101, close: 107 },
{ time: '2024-01-03', open: 107, high: 110, low: 104, close: 105 },
{ time: '2024-01-04', open: 105, high: 112, low: 103, close: 111 },
{ time: '2024-01-05', open: 111, high: 115, low: 109, close: 113 },
]);
ダークテーマで陽線・陰線の色を指定するとそれっぽい見た目になります。
リアルタイム更新
取引所のデータをリアルタイムで反映したい場合はupdateメソッドを使います。
// 新しいデータポイントを追加/更新
candleSeries.update({
time: '2024-01-06',
open: 113,
high: 118,
low: 112,
close: 116,
});
setData()は全データを置き換えるのでパフォーマンスに影響しますが、update()は最新データの追加・更新だけなので軽量です。
出来高ヒストグラムとの組み合わせ
実際のトレード画面では価格チャートと出来高を一緒に表示することが多いですよね。
import { createChart, CandlestickSeries, HistogramSeries } from 'lightweight-charts';
const chart = createChart(document.getElementById('chart'), {
width: 800,
height: 500,
});
// 価格用のキャンドルスティック
const candleSeries = chart.addSeries(CandlestickSeries);
// 出来高用のヒストグラム(別のpriceScaleを使用)
const volumeSeries = chart.addSeries(HistogramSeries, {
color: '#26a69a',
priceFormat: {
type: 'volume',
},
priceScaleId: '',
});
volumeSeries.priceScale().applyOptions({
scaleMargins: {
top: 0.8,
bottom: 0,
},
});
// データ設定
candleSeries.setData([/* 価格データ */]);
volumeSeries.setData([
{ time: '2024-01-01', value: 1000000, color: '#26a69a' },
{ time: '2024-01-02', value: 1500000, color: '#26a69a' },
// ...
]);
実践的なユースケース
仮想通貨価格トラッカー
ビットコインやイーサリアムの価格をリアルタイム表示するアプリを作るなら、WebSocketと組み合わせるのが定番です。
// 取引所のWebSocketに接続
const ws = new WebSocket('wss://stream.binance.com/ws/btcusdt@kline_1m');
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
const candle = data.k;
candleSeries.update({
time: candle.t / 1000,
open: parseFloat(candle.o),
high: parseFloat(candle.h),
low: parseFloat(candle.l),
close: parseFloat(candle.c),
});
};
株価分析ダッシュボード
複数の銘柄を比較表示したり、移動平均線を重ねて表示したりといった使い方もできます。
// 移動平均線を追加
const maSeries = chart.addSeries(LineSeries, {
color: '#2196F3',
lineWidth: 2,
});
// 移動平均データを計算して設定
const maData = calculateMovingAverage(priceData, 20);
maSeries.setData(maData);
ポートフォリオ管理アプリ
複数の資産の推移をBaselineチャートで表示すると、基準値からの乖離が分かりやすくなります。投資パフォーマンスの可視化に向いています。
Reactで使う場合
Reactで使う場合は、useEffectでチャートのライフサイクルを管理します。
import { useEffect, useRef } from 'react';
import { createChart, LineSeries } from 'lightweight-charts';
function Chart({ data }) {
const chartContainerRef = useRef(null);
const chartRef = useRef(null);
useEffect(() => {
if (!chartContainerRef.current) return;
const chart = createChart(chartContainerRef.current, {
width: chartContainerRef.current.clientWidth,
height: 400,
});
const lineSeries = chart.addSeries(LineSeries);
lineSeries.setData(data);
chartRef.current = chart;
// リサイズ対応
const handleResize = () => {
chart.applyOptions({
width: chartContainerRef.current.clientWidth
});
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
chart.remove();
};
}, [data]);
return <div ref={chartContainerRef} />;
}
まとめ
Lightweight Chartsは、金融チャートに特化した軽量ライブラリとして、かなり優秀な選択肢です。
- わずか35KBという軽量さ
- TradingView製の信頼性
- リアルタイム更新対応
- 6種類のチャートタイプ
- モバイルフレンドリー
Chart.jsでキャンドルスティックを実装しようとして苦労した経験がある人には、特におすすめできます。金融系のアプリやダッシュボードを作る際は、まずLightweight Chartsを検討してみてください。
公式ドキュメントのサンプルも充実しているので、眺めるだけでも何ができるかイメージが湧くと思います。
公式サイト: https://www.tradingview.com/lightweight-charts/ GitHub: https://github.com/tradingview/lightweight-charts
