1.0.3 • Published 3 years ago

@vistrible/kaktana-react-lightweight-charts v1.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

lightweight-charts version npm version npm bundle size Dependencies count Downloads

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

NameTypeDescription
optionsobjectDefines the global options of the chart. Refer to the official Docs
autoWidthbooleanIf true, the chart resizes automatically to 100% of its container width
autoHeightbooleanIf true, the chart resizes automatically to 100% of its container height
widthnumberif autoWidth is false, defines the width of the chart in px
heightnumberif autoHeight is false, defines the height of the chart in px
legendstringDisplay a global legend on the top-left corner of the chart (can be considered as a title)
candlestickSeriesSeriesObject listList of candlestick series to be displayed
barSeriesSeriesObject listList of bar series to be displayed
lineSeriesSeriesObject listList of line series to be displayed
areaSeriesSeriesObject listList of area series to be displayed
histogramSeriesSeriesObject listList of histogram series to be displayed
onClickMouseEventHandlerSubscribe to click events. The callback function is defined in the official Docs
onCrosshairMoveMouseEventHandlerSubscribe to crosshair move events. The callback function is defined in the official Docs
onTimeRangeMoveTimeRangeChangeEventHandlerSubscribe to time range change events. The callback function is defined in the official Docs
fromDateSets visible range from the specified date. Date object is defined in the official Docs
toDateSets visible range to the specified date. Date object is defined in the official Docs
darkThemebooleanIf true, a custom dark theme palette is applied to the chart

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

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.