https://github.com/henryluki/react-native-animated-pie

Animated Pie chart for React Native，use ART and Animated
https://github.com/henryluki/react-native-animated-pie

animated art d3 pie react-native

Last synced: 14 days ago
JSON representation

Animated Pie chart for React Native，use ART and Animated

• Host: GitHub
• URL: https://github.com/henryluki/react-native-animated-pie
• Owner: henryluki
• License: mit
• Created: 2018-08-11T09:27:39.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-17T16:57:24.000Z (almost 8 years ago)
• Last Synced: 2025-10-04T19:33:43.651Z (9 months ago)
• Topics: animated, art, d3, pie, react-native
• Language: JavaScript
• Size: 84 KB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-animated-pie

Animated Pie chart for React Native，use **ART** and **Animated**

## Demo

![demo](images/demo.png)

## Install

1. `npm i --save react-native-animated-pie`

2. Link the ART library to your ReactNative project ([how to link a library](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content)). You'll find the React ART library in `node_modules/react-native/Libraries/ART/ART.xcodeproj`

## Usage

```jsx

// @flow

import * as React from "react";

import { ScrollView, Easing } from "react-native";

import Pie from "react-native-animated-pie";

export default class PieExample extends React.Component {

  render() {

    const series = [40, 12, 68, 100, 25, 45, 200, 11];

    const delay = 0;

    return (

      

         d).sort((a, b) => b - a)}

          height={380}

          outerRadius={100}

          easing={Easing.linear}

          delay={delay}

        />

         d).sort((a, b) => a - b)}

          outerRadius={100}

          height={200}

          innerRadius={55}

          delay={delay + 1000}

          easing={Easing.circle}

        />

      

    );

  }

}

```

## Props

**`series`**: `Array` dataset, `required`

**`width`**?: `number` default `window width`

**`height`**?: `number` default `width`

**`outerRadius`**?: `number` default `width / 2`

**`innerRadius`**?: `number` default `0`

**`x`**?: `number` coordinate of pie center, default `width / 2`

**`y`**?: `number` coordinate of pie center, default height / 2

**`colors`**?: `Array` colors, check `src/constants.js` for default colors

**`delay`**?: `number` animation delay, default `0ms`

**`animate`**?: `boolean` animation or not, default `true`

**`duration`**?: `number` animation duration, default `1000ms`

**`easing`**?: `Function` easing func, default `Easing.out(Easing.cubic)`

## License

MIT