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:

1. Allows for main data line to be rendered alingside two other indicator lines that represent a simple moving average, and an exponential moving average.

2. Provides color customization of lines to be displayed.

3. Contains different graphical displays such as a Volume Bar chart and a Candle Stick Chart options.

4. Data is based on IEX format for data being displayed.

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

6. JEST testing functionality is also implemented within the library.

For developers wanting to work woth the module source code

Installation

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

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

yarn example

After running that then run the following command to run android.

yarn example android