rng

react-native-graphs

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

Showing:

Popularity

Downloads/wk

3

GitHub Stars

13

Maintenance

Last Commit

6yrs ago

Contributors

1

Package

Dependencies

3

License

ISC

Type Definitions

Tree-Shakeable

No?

Readme

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:

NameDefaultDescription
pointsnullThe points props specifies the coordinates to be display
bordertrueThis prop specifies if the chart will have border.
color'black'color specifies the color of the chart.
lineWidth3the lineWidth specifies the distance between the border lines
borderWidth4The borderWidth specifies the strokeWidth of the border lines.
selectedPoint0selectedPoint specifies the index of the point that will be selected by default
selectedColor'blackselectedColor specifies the color of the point selected.
backgroundColor'white'The backgroundColor specifies the background color of the chart.
radius5The radius specifies the radius of each point on the chart.
height300The height specifies the height of the chart.
width300The 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
yValues1The value of y that will appear on the chart
xValuesnullThe value of x that will appear on the chart. TODO.
textColor'black'the color of the text that will appear on the chart
onClicknullThis function is call everytime the user clicks on a point.

TODO:

  1. Create chart without borders
  2. Display xText

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial