README.md

Getting started

Installation

The first thing you need to do to use lightweight-charts is to install it from npm:

npm install --save lightweight-charts

Using a standalone version

The npm package is shipped with a standalone version. It puts all exports from esm version to window.LightweightCharts object and can be used, for example, in JSFiddle or in similar services.

Create your first chart

In modules environment

Note: the package is shipped with TypeScript declarations, so lightweight-charts can be easily used in TypeScript code.

After installing the package just add the following code to your JavaScript file:

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 },
]);

In non-modules environment

1. You need to be sure that a standalone version has been added to the page where you want to use lightweight-charts.

   Simply add a script tag to your page:

   <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>

2. Add the following code to the web page (for example, add it to a script tag in the HTML code of the page):

   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 },
   ]);

   JSFiddle

That's it! Your first chart is ready and we can now proceed.

What's next

• Series basics
• Customization