Lightweight Charts™
[![CircleCI][ci-img]][ci-link]
[![npm version][npm-version-img]][npm-link]
[![npm bundle size][bundle-size-img]][bundle-size-link]
[![Dependencies count][deps-count-img]][bundle-size-link]
[![Downloads][npm-downloads-img]][npm-link]
[![pkg.pr.new][pkg-pr-new-img]][pkg-pr-new-link]
[Demos][demo-url] | [Documentation](https://tradingview.github.io/lightweight-charts/) | [Reddit](https://www.reddit.com/r/TradingView/)
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](https://tradingview.github.io/lightweight-charts/plugins) for ready-made plugins, or see the [interactive plugin examples](https://tradingview.github.io/lightweight-charts/plugin-examples/) and [plugin-examples/README.md](https://github.com/tradingview/lightweight-charts/tree/master/plugin-examples) to build your own.
Take a look at [awesome-tradingview](https://github.com/tradingview/awesome-tradingview?tab=readme-ov-file#lightweight-charts) for related projects created by our community members.
## Installing
### es6 via npm
```bash
npm install lightweight-charts
```
### Latest master build
To try the latest `master` build without waiting for a release (powered by [pkg.pr.new](https://pkg.pr.new)):
```bash
npm install https://pkg.pr.new/lightweight-charts@master
```
The import and usage below applies to both npm installation options:
```js
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 },
{ time: '2019-04-20', value: 74.43 },
]);
```
### CDN
You can use [unpkg](https://unpkg.com/):