npm package: @tahausmank/react-native-kline
Description: React Native Kline
Author: TahaUsmanK
Latest version: 1.0.1

## @TahaUsmanK/react-native-kline

[![npm version](http://img.shields.io/npm/v/react-native-kline.svg?style=flat-square)](https://npmjs.org/package/react-native-kline "View this project on npm")
[![npm downloads](http://img.shields.io/npm/dm/react-native-kline.svg?style=flat-square)](https://npmjs.org/package/react-native-kline "View this project on npm")
[![npm licence](http://img.shields.io/npm/l/react-native-kline.svg?style=flat-square)](https://npmjs.org/package/react-native-kline "View this project on npm")
[![Platform](https://img.shields.io/badge/platform-ios%20%7C%20android-989898.svg?style=flat-square)](https://npmjs.org/package/react-native-kline "View this project on npm")

_仓库 Android 源码来源于[icechao/KlineChart](https://github.com/icechao/KlineChart). iOS 源码来源于[h-js/KLine](https://github.com/h-js/KLine)_

<img src="https://github.com/TahaUsmanK/react-native-kline/blob/master/screenshots/ios.png?raw=true" width="320">
<img src="https://github.com/TahaUsmanK/react-native-kline/blob/master/screenshots/android.png?raw=true" width="320">

## Install

```shell
npm i --save @tahausmank/react-native-kline
```

## Examples

To run examples:

```bash
npm i
npm start

#Android
npm run android

#iOS
cd ios/
pod install
npm run ios
```

## Props

| Prop                               | Type                                    | Description                                     | Platform    |
| ---------------------------------- | --------------------------------------- | ----------------------------------------------- | ----------- |
| datas                              | `Array<KLineBar>`                       | K 线历史数据                                    | Android iOS |
| locales                            | `Array<string>`                         | 多语言配置                                      | Android iOS |
| indicators                         | `Array<KLineIndicator>`                 | 指标配置                                        | Android iOS |
| onMoreKLineData                    | `(params: KLineCallbackParams) => void` | 图表请求加载更多历史数据                        | Android iOS |
| pricePrecision                     | number                                  | 价格精度                                        | Android iOS |
| volumePrecision                    | number                                  | 数量精度                                        | Android iOS |
| mainBackgroundColor                | string                                  | 主图背景色                                      | Android iOS |
| selectedXLabelBackgroundColor      | string                                  | 设置选中 X 轴坐标背景色                         | Android     |
| priceLabelInLineTextColor          | string                                  | 设置价格线上的文字颜色                          | Android     |
| priceLabelInLineTextSize           | number                                  | 设置价格线上的文字大小                          | Android     |
| selectedLabelTextColor             | string                                  | 设置选中 X 坐标文字颜色                         | Android     |
| selectedLabelTextSize              | number                                  | 设置选中 X 坐标文字大小                         | Android     |
| priceLabelInLineBoxMarginRight     | number                                  | 设置价格线上价格框离右距离                      | Android     |
| priceLabelInLineShapeWidth         | number                                  | 价格线上价格图形宽                              | Android     |
| priceLabelInLineShapeHeight        | number                                  | 价格线上价格图形高                              | Android     |
| priceLabelInLineBoxHeight          | number                                  | 设置价格线上价格框高度                          | Android     |
| priceLabelInLineBoxPadding         | number                                  | 设置价格线上价格框内边距                        | Android     |
| priceLabelInLineBoxShapeTextMargin | number                                  | 价格线上价格文字与图形的间隔                    | Android     |
| priceLabelInLineClickable          | boolean                                 | 设置价格线价格框可点击                          | Android     |
| priceLabelInLineBoxBackgroundColor | string                                  | 设置右侧价格框背景色                            | Android     |
| priceLabelRightBackgroundColor     | string                                  | 设置价格线右侧框背景                            | Android     |
| priceLabelInLineBoxBorderColor     | string                                  | 设置价格线右侧框边框颜色                        | Android     |
| priceLabelInLineBoxBorderWidth     | number                                  | 设置价格线框边框宽度                            | Android     |
| priceLabelInLineBoxRadius          | number                                  | 设置价格线上价格框圆角半径                      | Android     |
| priceLineRightLabelBackGroundAlpha | number                                  | 设置价格线右侧标签的背景透明度                  | Android     |
| priceLabelRightTextColor           | string                                  | 设置价格线右侧价格文字的颜色                    | Android     |
| priceLineRightColor                | string                                  | 设置价格线右侧的颜色                            | Android     |
| priceLineWidth                     | number                                  | 设置价格线的宽度                                | Android     |
| priceLineColor                     | string                                  | 设置价格线颜色                                  | Android     |
| priceLineDotSolidWidth             | number                                  | 价格线虚线实心宽度                              | Android     |
| priceLineDotStrokeWidth            | number                                  | 价格线实心间隔                                  | Android     |
| selectedXLineWidth                 | number                                  | 设置选择器横线宽                                | Android     |
| selectedYLineWidth                 | number                                  | 设置十字线竖线宽度                              | Android     |
| selectedXLineColor                 | string                                  | 设置十字线横线颜色                              | Android     |
| selectedYLineColor                 | string                                  | 设置十字线竖线画笔颜色                          | Android     |
| selectedYColor                     | string                                  | 选中的线的 Y 轴颜色                             | Android     |
| selectedCrossBigColor              | string                                  | 设置都十字线选中点外圆颜色                      | Android     |
| selectedCrossPointRadius           | number                                  | 设置十字线相交小圆半径                          | Android     |
| selectedCrossPointColor            | string                                  | 设置十字线交点小圆颜色                          | Android     |
| selectedShowCrossPoint             | boolean                                 | 设置选中时是否显示十字线的交点圆                | Android     |
| selectedPriceBoxBackgroundColor    | string                                  | 设置选中 Y 值背景色                             | Android     |
| selectedInfoTextSize               | number                                  | 设置选择器文字大小                              | Android     |
| selectedPriceBoxHorizontalPadding  | number                                  | 选中时价格 label 的横向 padding                 | Android     |
| selectedPriceBoxVerticalPadding    | number                                  | 选中时价格 label 的纵向 padding                 | Android     |
| selectedInfoBoxPadding             | number                                  | 选中信息框内边距,上下为此值\*2                  | Android     |
| selectedInfoBoxMargin              | number                                  | 选中行弹出框与边缘的距离                        | Android     |
| selectedInfoBoxTextColor           | string                                  | 设置选择器弹出框文字颜色                        | Android     |
| selectedInfoBoxBorderColor         | string                                  | 设置选择器弹出框边框颜色                        | Android     |
| selectedInfoBoxBackgroundColor     | string                                  | 设置选择器背景颜色                              | Android     |
| selectedLabelBorderWidth           | number                                  | 选中时 X 坐标边框线宽                           | Android     |
| selectedLabelBorderColor           | string                                  | 选中时 X 坐标边框线颜色                         | Android     |
| backgroundFillTopColor             | string                                  | 设置背景色顶部颜色                              | Android     |
| backgroundFillBottomColor          | string                                  | 设置背景色底部颜色                              | Android     |
| timeLineColor                      | string                                  | 设置分时线颜色                                  | Android     |
| timeLineFillTopColor               | string                                  | 设置分时线填充渐变的顶部颜色                    | Android     |
| timeLineFillBottomColor            | string                                  | 设置分时线填充渐变的底部颜色                    | Android     |
| timeLineEndPointColor              | string                                  | 分时线呼吸灯的颜色                              | Android     |
| timeLineEndRadius                  | number                                  | 分时线呼吸灯的颜色半径                          | Android     |
| selectedDateBoxVerticalPadding     | number                                  | 选中十字线 X 轴坐标连框纵向内边距               | Android     |
| selectedDateBoxHorizontalPadding   | number                                  | 选中十字线 X 轴坐标连框横向内边距               | Android     |
| mainLegendMarginTop                | number                                  | 设置主实图图例距离视图上边缘的距离              | Android     |
| legendMarginLeft                   | number                                  | 设置图例距离视图左边缘的距离                    | Android     |
| increaseColor                      | string                                  | 设置涨的颜色                                    | Android     |
| decreaseColor                      | string                                  | 设置跌的颜色                                    | Android     |
| betterXLabel                       | boolean                                 | 设置是否自适应 X 左右边轴坐标的位置,默认 true   | Android     |
| labelTextSize                      | number                                  | 设置坐标文字大小                                | Android     |
| labelTextColor                     | string                                  | 设置坐标轴坐标文字颜色                          | Android     |
| yLabelAlign                        | boolean                                 | 设置 Y 轴显示在左侧/右侧                        | Android     |
| betterSelectedXLabel               | boolean                                 | b 设置是否自适应 X 左右边轴坐标的位置,默认 true | Android     |
| commonTextSize                     | number                                  | 统一设置设置文字大小                            | Android     |
| mainMarginTop                      | number                                  | 设置上方 padding                                | Android     |
| paddingBottom                      | number                                  | 设置下方 padding                                | Android     |
| childPaddingTop                    | number                                  | 子视图的顶部 padding                            | Android     |
| commonTextColor                    | string                                  | 设置通用文字颜色                                | Android     |
| lineWidth                          | number                                  | 全局通用线宽                                    | Android     |
| candleWidth                        | number                                  | 设置每根蜡烛图宽度                              | Android     |
| candleLineWidth                    | number                                  | 设置蜡烛线画笔宽(空心时的线宽)                  | Android     |
| limitTextColor                     | string                                  | 设置主视图最大/最小值文字颜色                   | Android     |
| candleHollow                       | `CandleHollow`                          | 蜡烛是否空心                                    | Android     |
| gridLineWidth                      | number                                  | 设置背景网格线宽                                | Android     |
| gridLineColor                      | string                                  | 设置背景网格线颜色                              | Android     |
| gridLineRows                       | number                                  | 设置背景网格行数                                | Android     |
| gridLineColumns                    | number                                  | 设置背景网格列数                                | Android     |
| macdStrokeWidth                    | string                                  | macd 空心时线宽                                 | Android     |
| macdIncreaseColor                  | string                                  | 设置 macd 上涨颜色                              | Android     |
| macdDecreaseColor                  | string                                  | 设置 macd 下跌颜色                              | Android     |
| macdWidth                          | number                                  | macd 柱状图宽                                   | Android     |
| difColor                           | string                                  | 设置 DIF 颜色                                   | Android     |
| deaColor                           | string                                  | 设置 DEA 颜色                                   | Android     |
| macdColor                          | string                                  | 设置 MACD 颜色                                  | Android     |
| wr1Color                           | string                                  | 设置 WR1 颜色                                   | Android     |
| wr2Color                           | string                                  | 设置 WR2 颜色                                   | Android     |
| wr3Color                           | string                                  | 设置 WR3 颜色                                   | Android     |
| kColor                             | string                                  | 设置 K 颜色                                     | Android     |
| dColor                             | string                                  | 设置 D 颜色                                     | Android     |
| jColor                             | string                                  | 设置 J 颜色                                     | Android     |
| rsi1Color                          | string                                  | 设置 RSI1 颜色                                  | Android     |
| rsi2Color                          | string                                  | 设置 RSI2 颜色                                  | Android     |
| ris3Color                          | string                                  | 设置 RSI3 颜色                                  | Android     |
| ma1Color                           | string                                  | 设置 MA1 颜色                                   | Android     |
| ma2Color                           | string                                  | 设置 MA2 颜色                                   | Android     |
| ma3Color                           | string                                  | 设置 MA3 颜色                                   | Android     |
| volMa1Color                        | string                                  | 设置交易量 MA1 颜色                             | Android     |
| volMa2Color                        | string                                  | 设置交易量 MA2 颜色                             | Android     |
| volLegendColor                     | string                                  | 交易量图例颜色                                  | Android     |
| volLineChartColor                  | string                                  | 设置当成交量视图显示为线时的颜色                | Android     |
| volLegendMarginTop                 | number                                  | 交易量图例距离量视图上边缘的距离                | Android     |

## Important

Origin Repo: [472647301/react-native-kline](https://github.com/472647301/react-native-kline)