React-native-charts-tl NPM

react-native-charts-tl

Description

A react-native module for displaying customizable stock charts.

For users looking to incorporate this into their applications

Installation

To install this module into your project run the following commands:

yarn add react-native-charts-tl
yarn add react-native-svg

Usage Example

   import { Chart, ChartMode } from 'react-native-charts-tl';

   let dataPoints = [];

   render() {
      return <Chart
         dataPoints={dataPoints}
         showVolume={false}
         mode={ChartMode.LINE}
         obtainPressedIndex={this.doSomething}
      />
   }

   doSomething(selectedIndex) {}

For a more detailed example of incorporating this module into your project see the included example application located in ./node_modules/react-native-chart-gl/example/src/App.tsx

Chart Input Properties

Property	Data Format	Description
dataPoints (Required)	An array of IDataPoint datatype values	Data point values to be rendered onto the Chart.
indicators (Optional)	An array of IIndicator datatype values	Indicator values to render different information lines onto the Chart.
showVolume (Optional)	Boolean	Determines Volume Bar Chart display. Defaults to false
mode (Optional)	ChartMode	Determines Chart display mode. Defaults to LINE
coloring (Optional)	IChartsColor datatype	Maintains Chart color customization. See below for default coloring.
obtainPressedIndex() (Optional)	Callback function	Returnes the currently selected data point index from a touch event.

IChartsColor Input Properties

Property	Data Format	Description
positiveVolume (Optional)	String	Colors the Volume Bar Chart where there is a positive upturn. Default "green"
negativeVolume (Optional)	String	Colors the Volume Bar Chart where there is a negative downturn. Default "red"
background (Optional)	String	Maintains the background color of the Chart. Default "transparent"
dataLine (Optional)	String	Color of the line rendered by the "dataPoints" property. Default "blue"
selection (Optional)	String	Color of the line used to indicate data point selection. Default "white"

All colors can be defined as hex values or by giving standard CSS color names as defined here: https://www.w3schools.com/cssref/css_colors.asp

IDataPoint Input Properties

Property	Data Format	Description
open	number	opening value of the stock. This value is used for candlestick charts
close	number	closing value of the stock. This value is used to render line charts and candlestick charts
high	number	High value of the stock for the time period. This value is used when rendering candlestick charts
low	number	Low value of the stock for the time period. this value isused when rendering candlestick charts
volume	number	Number of stock units moved within the time period. This is used to render volume bar chart overlays.
date	String	Date of the stock data point in the format "YYYY-MM-DD"
minute	String	Time of the stock data point in the format "HH:MM"

IIndicator Input properties

Property	Data Format	Description
type	String	Type description of the indicator, for example "SMA" for simple moving average.
color	String	color to render the indicator line. This can be a hex value or a standard CSS color as defined here: https://www.w3schools.com/cssref/css_colors.asp.
data	number array	list of values for the indicator. the number of values in this array should equal the number of elements in the dataPoints array

ChartMode enumeration

This has two values, LINE and CANDLE. This will select how the dataPoints array is rendered to the chart.

Features

Library provide certain range of customization of how the library shows when rendered. These include:

Allows for main data line to be rendered alingside two other indicator lines that represent a simple moving average, and an exponential moving average.
Provides color customization of lines to be displayed.
Contains different graphical displays such as a Volume Bar chart and a Candle Stick Chart options.
Data is based on IEX format for data being displayed.
For specific point detail display, there is a callback function that returns the specfic index of where the point was pressed. This index is returned to the developer/user based on the idea that the developer/user would handle that.
JEST testing functionality is also implemented within the library.

For developers wanting to work woth the module source code

Installation

Clone the repository located at: https://github.com/jetstox/chart
Install dependencies

yarn install

Execution

To run the example app to test your changes to the library, first ensure an Android emulator is running. Then run the following command(s) within the Chart directory.