npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@qognicafinance/react-lightweight-charts

v1.0.5

Published

A simple react wrapper for the tradingview lightweight charts module by Qognica Finance. Forked from Kaktana.

Downloads

265

Readme

npm version npm downloads

Download and Installation

Installing via npm
npm install --save @qognicafinance/react-lightweight-charts
Installing via yarn
yarn add @qognicafinance/react-lightweight-charts

Usage

import Chart from '@qognicafinance/react-lightweight-charts'

To create a basic candlestick chart, write as follows:

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      options: {
        alignLabels: true,
        timeScale: {
          rightOffset: 12,
          barSpacing: 3,
          fixLeftEdge: true,
          lockVisibleTimeRangeOnResize: true,
          rightBarStaysOnScroll: true,
          borderVisible: false,
          borderColor: "#fff000",
          visible: true,
          timeVisible: true,
          secondsVisible: false
        }
      },
      candlestickSeries: [{
        data: [
          { time: '2018-10-19', open: 180.34, high: 180.99, low: 178.57, close: 179.85 },
          { time: '2018-10-22', open: 180.82, high: 181.40, low: 177.56, close: 178.75 },
          { time: '2018-10-23', open: 175.77, high: 179.49, low: 175.44, close: 178.53 },
          { time: '2018-10-24', open: 178.58, high: 182.37, low: 176.31, close: 176.97 },
          { time: '2018-10-25', open: 177.52, high: 180.50, low: 176.83, close: 179.07 },
          { time: '2018-10-26', open: 176.88, high: 177.34, low: 170.91, close: 172.23 },
          { time: '2018-10-29', open: 173.74, high: 175.99, low: 170.95, close: 173.20 },
          { time: '2018-10-30', open: 173.16, high: 176.43, low: 172.64, close: 176.24 },
          { time: '2018-10-31', open: 177.98, high: 178.85, low: 175.59, close: 175.88 },
          { time: '2018-11-01', open: 176.84, high: 180.86, low: 175.90, close: 180.46 },
          { time: '2018-11-02', open: 182.47, high: 183.01, low: 177.39, close: 179.93 },
          { time: '2018-11-05', open: 181.02, high: 182.41, low: 179.30, close: 182.19 }
        ]
      }]
    }
  }

  render() {
    return (
      <Chart options={this.state.options} candlestickSeries={this.state.candlestickSeries} autoWidth height={320} />
    )
  }
}

Wrapper props

|Name|Type|Description| |----|----|-----------| |options|object|Defines the global options of the chart. Refer to the official Docs| |autoWidth|boolean|If true, the chart resizes automatically to 100% of its container width| |autoHeight|boolean|If true, the chart resizes automatically to 100% of its container height| |width|number|if autoWidth is false, defines the width of the chart in px| |height|number|if autoHeight is false, defines the height of the chart in px| |legend|string|Display a global legend on the top-left corner of the chart (can be considered as a title)| |candlestickSeries|SeriesObject list|List of candlestick series to be displayed| |barSeries|SeriesObject list|List of bar series to be displayed| |lineSeries|SeriesObject list|List of line series to be displayed| |areaSeries|SeriesObject list|List of area series to be displayed| |histogramSeries|SeriesObject list|List of histogram series to be displayed| |onClick|MouseEventHandler|Subscribe to click events. The callback function is defined in the official Docs| |onCrosshairMove|MouseEventHandler|Subscribe to crosshair move events. The callback function is defined in the official Docs| |onTimeRangeMove|TimeRangeChangeEventHandler|Subscribe to time range change events. The callback function is defined in the official Docs| |from|Date|Sets visible range from the specified date. Date object is defined in the official Docs| |to|Date|Sets visible range to the specified date. Date object is defined in the official Docs| |darkTheme|boolean|If true, a custom dark theme palette is applied to the chart| |chartRef|function|Access to the chart ref to use Chart API function defined in the official Docs|

SeriesObject

SeriesObject is an object with the following fields:

  • options: the series-specific options. Please see the reference for the different serie types:
  • data: the series data. please refer to the official Docs
  • markers: List of Marker to be displayed on the series.
  • priceLines: List of PriceLine to be displayed on the series.
  • legend: the series legend to be displayed on the top-left corner of the chart. The value of the series at the selected time is displayed beside the text legend.
  • linearInterpolation: A number in seconds to auto-fill series data if no data has been provided between two data points for more than the provided time range.

License

@qognicafinance/react-lightweight-charts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.