react-native-pie-chart
Simple pie chart module for your React Native app.
Note: Support both ios and android now.
Getting Started
- Install
~$ npm install react-native-pie-chart --save
- Link ART to your project (only ios need to do this step)
Setup Example
# Clone package ~$ git clone https://github.com/genexu/react-native-pie-chart.git # Setup ART and dependencies # Notice: link ART to example/ios/example.xcodeproj (ios only) ~$ cd react-native-pie-chart/example~$ npm run-script setup # Run simulator # Notice: plz make sure your simulator state is normal ~$ react-native run-ios~$ react-native run-android
Usage
Note: You can find this example in test folder.
;;; const styles = StyleSheet; { const chart_wh = 250 const series = 123 321 123 789 537 const sliceColor = '#F44336''#2196F3''#FFEB3B' '#4CAF50' '#FF9800' return <ScrollView style=flex: 1> <View style=stylescontainer> <StatusBar hidden=true /> <Text style=stylestitle>Basic</Text> <PieChart chart_wh=chart_wh series=series sliceColor=sliceColor /> <Text style=stylestitle>Doughnut</Text> <PieChart chart_wh=chart_wh series=series sliceColor=sliceColor doughnut=true coverRadius=045 coverFill='#FFF' /> </View> </ScrollView> ; } AppRegistry;
Props
Property | Type | Description | Required | Default |
---|---|---|---|---|
chart_wh | Number | chart width and height | Yes | |
coverFill | String | doughnut cover fill color | No | #FFF |
coverRadius | Number | doughnut cover radius | No | 0.6 |
doughnut | Bool | doughnut style | No | false |
series | Array < number > | series data array | Yes | |
sliceColor | Array < string > | series slice color array | Yes | |
style | Object | pie chart style | No | {} |