genexu / react-native-pie-chart Goto Github PK
View Code? Open in Web Editor NEWSimple pie chart module for your React Native app
License: MIT License
Simple pie chart module for your React Native app
License: MIT License
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.
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:
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.
@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
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
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.