react-native-graphs

react-native-graphs is built to provide a chart to react native on both iOS and Android

Features

1. Supports only border charts with circles.
2. Touchables coordinates.
3. Scrollable chart.

Install

npm install react-native-graphs

rnpm link react-native-svg

Usage

There is an easy example

import Chart from 'react-native-graphs';
class ChartExample extends Component {
constructor(){
  super();
  this.state = {
    touch:'none',
    selected: 0
  }
}
  render() {
    return (   
    <View style = {{ flex:1}}>
       <Chart 
            points={[{x:75,y:150,id:0},{x:150,y:300,id:1},{x:225,y:296,id:2},{x:500,y:296,id:3}]} 
            border = {true} 
            radius = {10}
            borderWidth = {4}
            lineWidth = {3}
            borderColor = 'black'
            selectedColor = 'blue'
            backgroundColor = 'white'
            selectedPoint = {this.state.selected}
            height = {450}
            width = {400}
            yValues = {[400,200]}
            yText = ""
            textColor = "black"
            onClick = {this.pointClick.bind(this)}
            />
            <Text>
              {this.state.touch}
            </Text>
     
    </View>
    );
  }
  pointClick(obj){
    this.setState({touch:"x:"+obj.x+" y:"+obj.y, selected:obj.id});
  }
}

Props:

Name | Default | Description ----------------|------------|-------------- points | null | The points props specifies the coordinates to be display border | true | This prop specifies if the chart will have border. color | 'black' | color specifies the color of the chart. lineWidth | 3 | the lineWidth specifies the distance between the border lines borderWidth | 4 | The borderWidth specifies the strokeWidth of the border lines. selectedPoint | 0 | selectedPoint specifies the index of the point that will be selected by default selectedColor | 'black | selectedColor specifies the color of the point selected. backgroundColor | 'white' | The backgroundColor specifies the background color of the chart. radius | 5 | The radius specifies the radius of each point on the chart. height | 300 | The height specifies the height of the chart. width | 300 | The width specifies the width of the chart. xText | '' | The xText specifies the text that will appear on each value of the X axis yText | '' | The yText specifies the text that will appear on each value of the y axis yValues | 1 | The value of y that will appear on the chart xValues | null | The value of x that will appear on the chart. TODO. textColor | 'black' | the color of the text that will appear on the chart onClick | null | This function is call everytime the user clicks on a point.

TODO:

1. ~~Create chart without borders~~
2. Display xText