tradingview/lightweight-charts

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 | 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 },
    { time: '2019-04-20', value: 74.43 },
]);

CDN

You can use unpkg:

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|

AI coding assistants

This repository ships two Agent Skills for AI coding assistants, such as Claude Code and Codex. The skills give the assistant current v5 knowledge to work from, instead of outdated snippets it may remember from training:

• lightweight-charts is about using the library. It covers the v5 API conventions, the mental model, and common time, scale, marker, plugin, and wrapper foot-guns.
• lightweight-charts-plugin-authoring is about writing a plugin. The skill helps choose between a custom series and a primitive, build on @tradingview/lwc-toolkit, and learn from the official plugin packages. It also warns about the common autoscale, whitespace, and hit-test traps. The create-lwc-plugin wizard offers to install this skill into a new plugin project.

npx skills add tradingview/lightweight-charts

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 in the 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 (, (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 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 on the chart itself, which will satisfy the link requirement.

[demo-url]: https://www.tradingview.com/lightweight-charts/

[ci-img]: https://img.shields.io/circleci/build/github/tradingview/lightweight-charts.svg [ci-link]: https://circleci.com/gh/tradingview/lightweight-charts

[npm-version-img]: https://badge.fury.io/js/lightweight-charts.svg [npm-downloads-img]: https://img.shields.io/npm/dm/lightweight-charts.svg [npm-link]: https://www.npmjs.com/package/lightweight-charts

[bundle-size-img]: https://badgen.net/bundlephobia/minzip/lightweight-charts [deps-count-img]: https://img.shields.io/badge/dynamic/json.svg?label=dependencies&color=brightgreen&query=$.dependencyCount&uri=https%3A%2F%2Fbundlephobia.com%2Fapi%2Fsize%3Fpackage%3Dlightweight-charts [bundle-size-link]: https://bundlephobia.com/result?p=lightweight-charts [pkg-pr-new-img]: https://pkg.pr.new/badge/tradingview/lightweight-charts [pkg-pr-new-link]: https://pkg.pr.new/~/tradingview/lightweight-charts