genexu / react-native-pie-chart Goto Github PK

Hi @genexu,

I would like to become the maintainer of this package. My company (https://github.com/movio/) uses this package in one of its apps. It's a nice little package that does the job and we don't need to add some large dependencies to our app just to draw a pie chart.

You did a great job writing this package. I understand you don't have time anymore to maintain this. So I decided to step up and take the responsibility, so this useful package can live on.

Please let me know what do you think.

Pie Chart get scattered in the given area. It doesn't draw a complete circle.

Can you make additional property so we can have information about each pie. So it would look like image below.

When I have large data the chart messes up. Refer attached screenshot. Solution is appreciated.

After I install react-native-pi-chart via 'yarn add react-native-pie-chart', the developer console shows error as belows.

error: Error: Unable to resolve module @react-native-community/art from D:\working\CovidTracker\node_modules\react-native-pie-chart\dist\Pie.js: @react-native-community/art could not be found within the project or in these directories:
node_modules\react-native-pie-chart\node_modules
node_modules

If you are sure the module exists, try these steps:

1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*

Is there any good way to tackle this issue?

hi @genexu I have a issue in my project.
My RN version is 0.41.2 , and the 'react-native-pie-chart' upgrade version to 1.0.12 , there hava a issue style: ViewPropTypes.style,

Have there a low version for 0.41.2 .

Thank you very much!!!!!!

Can i put text inside of the doughnut pie chart ? ( in the white area in the center )

In your installation instruction it says the second step says link art , do you mean to run react-native link? if so then I think you should state that, but anyways I've ran react-native link and got an error, No component found for view with name ARTShape.

This gives me a completely green donut.
const chart_wh = 300
const series = [7, 2, 13, 0]
const sliceColor = ['#F44336','#2196F3','#FFEB3B', '#4CAF50']

Adding an extra 0 to series gives me the right proportions though
const chart_wh = 300
const series = [7, 2, 13, 0, 0]
const sliceColor = ['#F44336','#2196F3','#FFEB3B', '#4CAF50']

Hi @genexu,

I hope you're fine and everything is alright. (:

I have a favor to ask.

As you might know, the "@react-native-community/art" package is deprecated (#49). So, I rewrote the code of the package to use "react-native-svg" and "d3". I ended up re-writing the whole code!
So I thought, I move it under my own Github account. So I can also have admin access to the repo.

Will you be kind enough to transfer the ownership of the repo to me? In that way, the starts, issues, PRs, etc will remain. Including your credit, as the main designer/contributor.
It's fine if you don't want to. I can create a new repo. But it will be a pity to lose all the history.

Please let me know what you think.

Many thanks,

Hey,

So I was trying to use the chart for a single value like so:
const series = [1];

And instead of drawing a circle it messes it up as shown:

What I'm trying to accomplish is a dynamic pie chart with three values in the series, so if one of them is say 0, that is
const series = [0, 25, 52];

It should just render the pie chart with two values. Is there a better way to accomplish that? Because passing 1 value in causes that issue.

Thanks!

edit: Forgot to mention I'm testing on an Android device.

Steps to reproduce:

• Keep the app in foreground with chart displaying
• Lock the device
• Unlock and see the empty screen, Chart is not visible

@mithunm93
I'm doing further testing today, use newest version react-native, and it will show warning after Pie style prop update, did you have same problem?

In addition, can you show me propType errors you say at original version? I don't get any error at original version, so i want to see what error it is.(original version mean the version before merge you PR)

Looks like View.propTypes will be deprecated in future releases of ReactNative.

"Warning: View.propTypes has been deprecated and will be removed in a future version of ReactNative. Use ViewPropTypes instead"

While using an expo app (managed workflow), I run into the error while running this code:

<PieChart
    widthAndHeight={250}
    series={[123, 321, 123, 789, 537]}
    sliceColor={['#F44336','#2196F3','#FFEB3B', '#4CAF50', '#FF9800']}
 />

I simply made sure to install the following packages: react, react-native and @react-native-community/art and ran the app. Is there some additional setup that is required? Or is this just incompatible with expo apps?

Versions:
"@react-native-community/art": "^1.2.0",
"react": "18.1.0",
"react-native": "0.70.5",

Thanks in advance!

Hey,

So I'm having a strange issue with the pie chart disappearing if the screen is turned off and turned back on. I could not figure out a way to re-render the chart in such a scenario. What's going on here?

Thanks!

With this series

[789669, 530000, 40149, 3236, 16358, 26]

in index.tsx, the expression

previous[previous.length - 1] + Math.round((360 * current) / sum)

returns an angle greater than 360.

Math.round should be changed in Math.floor

react-native: 0.61.5
react-native-pie-chart: 1.0.13

I installed this library and I faced "no component found for view with name ARTShape" error.
So I found solution.
(oblador/react-native-progress#127 (comment))

yarn add @react-native-community/art

Please write to the REAME that you also need to install this

Hi, I got this issue while I tried to render a piechart, and the series is [0, 100] or [100, 0].
I found the code in wedge.js file like below:

It's wired to return nothing in render method.

Is it possible to have a pie chart with pieces of different height respectively with react-native-pie-chart:
https://cdn.dribbble.com/users/976153/screenshots/2667285/dribbble_graph-01_1x.png

Hi, can you tell me what units the series values are in; is it radians?
What would values be for a 50/50 pie chart for example?

Thanks for the help

It is better not to make it public until both platforms are supported.

While using piechart if we provide 0,0 value in series it crashes application.

Try :
series={[0,0,0]}

how to Link ART to your project

I've seen that https://github.com/react-native-art/art has been declared deprecated

DEPRECATED - This package is deprecated. If you need a similar package please consider using react-native-svg.

Should or is this package going to move to using RN-SVG as its dependency instead of Art?

Are you planning to support Android as well? Your iOS implementation works perfect for me, but require Android support as well for my project. Thanks in advance.

"react-native": "0.64.2"
"react-native-pie-chart": "^1.0.13"
"@react-native-community/art": "^1.2.0"

I've recently updated my RN version along with the RNPC version to the listed above, but keep getting this error. Although, have seen there's no need to link @react-native-community/art manually. I did hope that it would work out of the box but didn't.
Any possible workaround for this would be of great help.
Thanks!