lightweight-charts-with-getbarspacing
TypeScript icon, indicating that this package has built-in type declarations

2.1.2 • Public • Published

Lightweight Charts

CircleCI npm version npm bundle size Dependencies count Downloads

Demos | Documentation | Discord community

This is a copy of tradingview/lightweight-charts except with the added function of getbarSpacing(), suggested by triorr here: https://github.com/tradingview/lightweight-charts/issues/50#issuecomment-504787139 This allows you to return the space between bars on charts, allowing them to be easily synced.

getbarSpacing() usage

    var chart = LightweightCharts.createChart(document.body, {});
    var barSpacing = chart.timeScale().getbarSpacing();

This will return a value which can be used to synchronise the scale of two charts.

    chart.timeScale().subscribeVisibleTimeRangeChange(syncHandler)
    function syncHandler(e) {
        var barSpacing1 = chart.timeScale().getbarSpacing();
        var scrollPosition1 = chart.timeScale().scrollPosition();
        chart2.timeScale().applyOptions({ rightOffset: scrollPosition1, barSpacing: barSpacing1 })
    }
        
    chart2.timeScale().subscribeVisibleTimeRangeChange(syncHandler2)
    function syncHandler2(e) {
        var barSpacing1 = chart2.timeScale().getbarSpacing();
        var scrollPosition1 = chart2.timeScale().scrollPosition();
        chart.timeScale().applyOptions({ rightOffset: scrollPosition1, barSpacing: barSpacing1 })
    }

TradingView Lightweight Charts are 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.

Installing

es6 via npm

npm install lightweight-charts-with-getbarspacing
import { createChart } from 'lightweight-charts-with-getbarspacing';
 
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 },
]);

CDN

You can use unpkg:

https://unpkg.com/lightweight-charts-with-getbarspacing@2.1.0/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 },
]);

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 the Apache License, Version 2.0.

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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.1.2
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 2.1.2
    0
  • 2.1.1
    0
  • 2.1.0
    0

Package Sidebar

Install

npm i lightweight-charts-with-getbarspacing

Weekly Downloads

0

Version

2.1.2

License

Apache-2.0

Unpacked Size

1.46 MB

Total Files

10

Last publish

Collaborators

  • x_charles