Skip to content
Simple pie chart module for your React Native app
JavaScript Objective-C Python Java
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.eslintrc.json
.gitignore
.npmignore
README.md
package.json

README.md

react-native-pie-chart

NPM

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)

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.

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 {}
You can’t perform that action at this time.