tradingview/lightweight-charts

ライトウェイトチャート™

[デモ][デモURL] |ドキュメント |Reddit

TradingViewの軽量チャート™は、最も小さく高速な金融HTML5チャートの一つです。

ウェブページ上で金融データをインタラクティブなチャートとして表示したい場合や、静止画像チャートをインタラクティブなチャートに置き換えたい場合、Lightweight Charts™ライブラリが最適です。これにより、ウェブページの読み込み速度やパフォーマンスに影響を与えません。 ライブラリのサイズは静止画像に近いですが、ウェブページに数十枚の画像チャートがある場合、このライブラリを使うことでウェブページのサイズを小さくすることができます。

ライブラリは箱から豊富なチャート機能を提供しますが、カスタムプラグインを作成して機能を拡張することも可能です。プラグインカタログで既製プラグインを探したり、インタラクティブプラグインの例やplugin-examples/README.mdを参照して自分で作りましょう。

コミュニティメンバーが作成した関連プロジェクトについては、awesome-tradingviewをご覧ください。

インストール中

ES6 NPM経由

最新のマスタービルド

リリースを待たずに最新のmasterビルドを試すには(pkg.pr.newで提供):

以下のインポートと使用例は両方のnpmインストールオプションに適用されます:

[Demos][demo-url] | Documentation | Reddit

TradingView Lightweight Charts™ are one of the smallest and fastest financial HTML5 charts.

The Lightweight Charts™ library is the best choice for you if you want to display financial data as an interactive chart on your web page, or replace static image charts with interactive ones. It does this without affecting your web page’s loading speed and performance. The size of the library is close to static images but if you have dozens of image charts on a web page then using this library can make the size of your web page smaller.

The library provides a rich set of charting capabilities out of the box, but you can also extend its functionality by building custom plugins. Browse the plugin catalog for ready-made plugins, or see the interactive plugin examples and plugin-examples/README.md to build your own.

Take a look at awesome-tradingview for related projects created by our community members.

Installing

es6 via npm

npm install lightweight-charts

Latest master build

To try the latest master build without waiting for a release (powered by pkg.pr.new):

npm install https://pkg.pr.new/lightweight-charts@master

The import and usage below applies to both npm installation options:

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 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },