react-native-pie-chart

react-native-pie-chart

Simple pie chart module for your React Native app.
Note: Support both ios and android now.

Getting Started

1. Install
   ~$ npm install react-native-pie-chart --save
2. Link ART to your project (only ios need to do this step)

Usage

Note: You can find this example in test folder.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, ScrollView , StatusBar, Text, View } from 'react-native';
import PieChart from 'react-native-pie-chart';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center'
  },
  title: {
    fontSize: 24,
    margin: 10
  }
});

export default class test extends Component {
  render() {
    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={styles.container}>
          <StatusBar
            hidden={true}
          />
          <Text style={styles.title}>Basic</Text>
          <PieChart
            chart_wh={chart_wh}
            series={series}
            sliceColor={sliceColor}
          />
          <Text style={styles.title}>Doughnut</Text>
          <PieChart
            chart_wh={chart_wh}
            series={series}
            sliceColor={sliceColor}
            doughnut={true}
            coverRadius={0.45}
            coverFill={'#FFF'}
          />
        </View>
      </ScrollView>
    );
  }
}

AppRegistry.registerComponent('test', () => test);

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	{}