Important Notice:

This repo is no longer maintained and is therefore deprecated. You can get a maintained version of this repo in the following fork: https://github.com/Qognica/qognicafinance-react-lightweight-charts

Download and Installation

Installing via npm

npm install --save kaktana-react-lightweight-charts

Installing via yarn

yarn add kaktana-react-lightweight-charts

Usage

import Chart from 'kaktana-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

SeriesObject

SeriesObject is an object with the following fields:

• options: the series-specific options. Please see the reference for the different serie types:
  • candlestickSeries
  • barSeries
  • lineSeries
  • areaSeries
  • histogramSeries
• 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

kaktana-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.