I wanna show a tooltip above every pie to show extra information. Is it possible to add an onPress handler and a view on every pie?

In using this package, I can't imagine a use case that requires series and color to be in their own respective arrays. They will always have the same number of elements correct? Does anyone have an example where having more items in series than color is useful (or vice versa)?

I think it would be far more readable if we had a single items array, and properties of objects in items would be color and percentage.

You library worked fined in react-native 0.47 but when I upgraded to 0.48.4 today, below error appeared any idea?

Error : TypeError: undefined is not an object (evaluating 'this.hex')

Usage:

import Pie from 'react-native-pie'

<Pie
                        radius={80}
                        sections={[
                            {
                                percentage: 10,
                                color: '#C70039',
                            },
                            {
                                percentage: 20,
                                color: '#44CD40',
                            },
                            {
                                percentage: 30,
                                color: '#404FCD',
                            },
                            {
                                percentage: 40,
                                color: '#EBD22F',
                            },
                        ]}
                        dividerSize={6}
                        strokeCap={'butt'}
                    />

RN version: 0.63.4
react-native-pie: 1.1.2
Device: Android 10 (emulator)

There is no license file for this project. Would you accept a PR adding one?

Thorough testID support for each section of the pie would be nice!

It's throwing this exception with some data:

I've tracked it down to sending a blank color '' in one of the bands which I can fix my end, but it would be better if the component is resilient enough to recover from such bad data, eg by defaulting bad colours to white or transparent rather than crashing the app.

Hello,

How to make the Pie Label, not in middle but in the slice of pie?

Thank you

@nihgwu @SpencerLynn @zgordon01 @kevkevinpal are you guys aware of this issue?

if you know of a solution to this please share...
Thank you in advance.

Hey
Im trying to add an image inside the pie but with no success:

    <View style={styles.statContainer}>
    {
      <Pie radius={43} innerRadius={33} series={series} colors={['#FFF', color, '#FFF']} backgroundColor='#DCDCE0' />
    }
    
    <View style={styles.gauge}>
      
        <ResponsiveImage
        style={{ backgroundColor: 'transparent' }}
        source={require('../assets/calories_gauge.png')}
        initWidth="1"
        initHeight="1" />
        
    </View>

How can I do that? thanks!

Migrating from react-native-community/art to react-native-svg

react-native-community/art is a deprecated library, and with JCenter becoming read-only on February 1st, 2022 a migration to react-native-svg should be done to avoid issues related to JCenter. RNSvg is the recommended replacement library for RNC/art as per the RNC/art readme.

A similar migration has been done to react-native-progress

Hey there is a any option to make the pie color as gradient?

hi @nihgwu
thank for your lib.
i want to create space between lines and border radius lines.
like this. Could you tell me how to do this? Thank you.

Hi!
I am having the issue attached trying to render a pie defined as below:

                    <View>
                        <Pie
                            radius={50}
                            innerRadius={45}
                            series={[60]}
                            colors={['#f00']}
                            backgroundColor='#ddd' />
                        <View style={styles.gauge}>
                            <Text style={styles.gaugeText}>60%</Text>
                        </View>
                    </View>

I am using React Native 0.55

Sir I have a dynamic value for the pie [40,0,0,0] for the colors ['red', 'lime', 'blue', 'yellow', 'green']. Here was the output

Sir how can I fill the whole circle just like my values above. Thank you in advance!

Hi!

I experience an issue with Pie on Android:

Same code is working on iOS:

What's the reason for this behaviour?

Android version: 4.4.2

Thanks in advance.

Animation should starts after pressing on TouchableOpacity. any ideas why does not it work?

export default class TimelapseButton extends Component{
  constructor(props) {
    super(props);

    this.state = {
      progress: new Animated.Value(10)
    }
  }

  countTime = () => {
     Animated.timing(this.state.progress, {
        toValue: 100,
        duration: 4000
     }).start();
  }

  render() {
    return (
        <View style={styles2.container}>
            <TouchableOpacity onPress={this.countTime} style={styles2.container}>
              <PieDemo series={this.state.progress._value}/>
            </TouchableOpacity>
        </View>
    );
  }
}

@nihgwu @msand @SpencerLynn @zgordon01 @kevkevinpal I am trying to create a donut pie chart in react-native where curve should be in clock direction. I achieved most of it to fulfil the requirement using plugin https://github.com/nihgwu/react-native-pie but I am not finding a way to change the direction.

If anyone has played around with this component then please suggest the code changes to meet the expected UI.

anyone please help me

Unable to resolve module @react-native-community/art from ...\HS-Hemes\node_modules\react-native-pie\src\Pie.js: Module @react-native-community/art does not exist in the Haste module map

How do we solve this. the version of modules is "react-native-pie": "^1.1.2",

The charts are not rendering after bundling and in order to see changes I have to turn ON my toggle inspector.
Idea: Can we also implement each section as a clickable type, for Ex: clicking on Red section triggers an event and doing so on Green triggers another..?

Looks like artGroup using I for key and for each item on pie have a duplicate key

ExceptionsManager.js:126 Warning: Encountered two children with the same key, `3`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in ARTGroup (at Group.js:35)
    in Group (at Pie.js:129)
    in RoundDividers (at Pie.js:178)
    in ARTGroup (at Group.js:35)
    in Group (at Pie.js:169)
    in ARTSurfaceView (at Surface.js:37)
    in Surface (at Pie.js:168)
    in Pie (at ModaBuyingPower.tsx:105)
    in RCTView (at ModaBuyingPower.tsx:104)
    in RCTSafeAreaView (at SafeAreaView.js:55)
    in SafeAreaView (at ModaBuyingPower.tsx:98)
    in RCTView (at Paper.tsx:58)
    in Paper (created by Context.Consumer)

Hi

would you make some changes or add features in the future?

Is there something particular I need to do to get Pie to render in Android? It works fine in iOS, but Android will not render the pie. I know it will render other items (I'm using it for markers in react-native-maps), because I have gotten those to show up, but Pie always comes back with nothing. There is no block or anything like that, it's just not there. Any help is appreciated.

Is there any plan to ship a TypeScript interface with the package?

Hello Admin, Can you please update for the React Native 0.60+ version.
I have tried different ways to add ART libraries but end the end they are not working with react native's new updated version (React Native 0.60+).

Can you please check and describe any way if any?

Hi and thanks for your awesome work!

I was wondering if I could somehow achieve the following pie:

I tried to add a background color in the color of the border, and then have a series like [20, 80] with colors: [blue, white], but the border is really tiny and almost can't be seen. Resulting in:

Since the new version 0.2.0, i receive following error warning:

I bet on the modified key={idx} property in the Shape element.

<Pie
radius={80}
innerRadius={60}
series={[31,24,16,355,18,1,165]}
colors={['#f00', '#0f0', '#00f', '#ff0','green','blue','red']} />

passing values like this doesn't reflect in piechart shows only a constant color

after rendering the pie chart make screen of and on (by locking phone)...you will see pie chart diapered

My code looks like this and it works fine on iOS.
<Pie
radius={67}
series={[30, 70]}
colors={['#919dfe', '#6274FE']}
/>

doesn't work this library..

packege.json is

  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.10",
    "react-native-pie": "^0.1.0"
  },

got error

<Pie
radius={80}
innerRadius={60}
series={[31,24,16,355,18,1,165]}
colors={['#f00', '#0f0', '#00f', '#ff0','green','blue','red']} />

passing values like this doesn't reflect in piechart shows only a constant color

@nihgwu is it possible that we get version 1.0 deployed to npm? My team is going to consume it soon.

Throwing this error on Android in dev mode, but production mode seems to be OK.

Error while updating property 'stroke' in shadow node of type: ARTShape
java.lang.String cannot be cast to com.facebook.react.bridge.ReadableArray

I used this package about a year and a half ago (version ~0.6.0), and just recently came back to my project, and I'm getting an "Invariant Violation: requireNativeComponent: "ArtShape" was not found in the UIManager" error. I've installed @react-native-community/art but I'm unable to link it due to running on Expo (managed workflow). I assume this means this package is now incompatible with Expo?

Thanks in advance.