lightweight-charts

Lightweight Charts™

Demos | 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 without affecting your web page loading speed and performance.

It is the best choice for you if you want to replace static image charts with interactive ones. 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.

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

The library provides a rich set of charting capabilities out of the box, but developers can also extend its functionality by building custom plugins. See the interactive plugin examples here, or check out plugin-examples/README.md for more details.

Installing

es6 via npm

npm install lightweight-charts

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/lightweight-charts/dist/lightweight-charts.standalone.production.js

The standalone version creates window.LightweightCharts object with all exports from esm version:

const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addSeries(LightweightCharts.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 },
]);

Build Variants

Dependencies included	Mode	ES module	IIFE (window.LightweightCharts)
No	PROD	lightweight-charts.production.mjs	N/A
No	DEV	lightweight-charts.development.mjs	N/A
Yes (standalone)	PROD	lightweight-charts.standalone.production.mjs	lightweight-charts.standalone.production.js
Yes (standalone)	DEV	lightweight-charts.standalone.development.mjs	lightweight-charts.standalone.development.js

Development

See BUILDING.md for instructions on how to build lightweight-charts from source.

License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this software except in compliance with the License. You may obtain a copy of the License at LICENSE file. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

This software incorporates several parts of tslib (https://github.com/Microsoft/tslib, (c) Microsoft Corporation) that are covered by BSD Zero Clause License.

This license requires specifying TradingView as the product creator. You shall add the "attribution notice" from the NOTICE file and a link to https://www.tradingview.com/ to the page of your website or mobile application that is available to your users. As thanks for creating this product, we'd be grateful if you add it in a prominent place. You can use the attributionLogo chart option for displaying an appropriate link to https://www.tradingview.com/ on the chart itself, which will satisfy the link requirement.

Similar packages

Other packages similar to lightweight-charts

chart.js

Chart.js is a popular open-source library for creating a variety of charts, including line, bar, and pie charts. It is more general-purpose compared to lightweight-charts, which is specifically optimized for financial charts. Chart.js offers more chart types and customization options but may not be as performant for large datasets as lightweight-charts.

highcharts

Highcharts is a feature-rich charting library that supports a wide range of chart types, including those used in financial applications. It offers extensive customization options and is widely used in the industry. Compared to lightweight-charts, Highcharts is more heavyweight and may require a license for commercial use, but it provides more advanced features and support.

d3

D3.js is a powerful JavaScript library for creating complex and interactive data visualizations. While it is not specifically designed for financial charts, it offers unparalleled flexibility and control over the visualization process. D3.js requires more effort to create financial charts compared to lightweight-charts, which provides ready-to-use components for this purpose.