TradingView Lightweight Charts is one of the smallest and fastest financial HTML5 charts.
The Lightweight Charting 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.
Getting started guide and documentation you can find in docs folder.
npm install lightweight-charts
import { createChart } from 'lightweight-charts';
const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
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 },
]);
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.addLineSeries();
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 },
]);
npm run tsc
- compiles the source code only (excluding tests)npm run tsc-watch
- runs the TypeScript compiler in the watch mode for source code (same astsc
, but in the watch mode)npm run tsc-all
- compiles everything (source code and tests)npm run tsc-all-watch
- runs the TypeScript compiler in watch mode for source code and tests (same astsc-all
, but in watch mode)
npm run rollup
- runs Rollup to bundle codenpm run build
- compiles source code and bundles it (as one word fornpm run tsc && npm run rollup
)
Note that only the dev version is bundled by default.
To bundle production builds (minified) too just set the NODE_ENV
variable to production
and run bundling, e.g. NODE_ENV=production npm run rollup
.
npm run lint
- runs lint for the codenpm run test
- runs unit-tests
To make sure that your local copy passed all (almost) checks, you can use the verify
npm script: npm run verify
.
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 the the Apache License, Version 2.0.
This license requires specifying TradingView as the product creator. You can use one of the following methods to do it:
- do not disable the TradingView branding displaying;
- add the "attribution notice" from the NOTICE file and a link to our website (https://www.tradingview.com/) to the page of your website or mobile application that is available to your users;