Comments (3)
@novamaster-git Thanks for requesting this feature. I will release it in the next version.
from react-native-gifted-charts.
Hi @novamaster-git
You can make 3 donut charts and use position: 'absolute
to put them above one another.
Here's an example-
onst d1 = [
{value: 4, color: '#E33716'},
{value: 9, color: '#381C16'},
];
const d2 = [
{value: 4.5, color: '#B0D44C'},
{value: 9, color: '#303621'},
];
const d3 = [
{value: 4, color: '#43D5FC'},
{value: 9, color: '#16353C'},
];
return (
<View style={{flex: 1, backgroundColor: 'black'}}>
<PieChart data={d1} donut innerCircleColor="black" innerRadius={92} />
<View style={{position: 'absolute', top: 38, left: 38}}>
<PieChart
data={d2}
donut
radius={82}
innerCircleColor="black"
innerRadius={62}
/>
</View>
<View style={{position: 'absolute', top: 68, left: 68}}>
<PieChart
data={d3}
donut
radius={52}
innerCircleColor="black"
innerRadius={32}
/>
</View>
</View>
);
The output is-
![Screenshot 2024-03-01 at 7 23 13 PM](https://private-user-images.githubusercontent.com/20596944/309281567-14d4f6e5-e40a-4a5d-86f4-ab47be4842fc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTA2MjAxNjMsIm5iZiI6MTcxMDYxOTg2MywicGF0aCI6Ii8yMDU5Njk0NC8zMDkyODE1NjctMTRkNGY2ZTUtZTQwYS00YTVkLTg2ZjQtYWI0N2JlNDg0MmZjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzE2VDIwMTEwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFiYThhNzA4YjM3MzYwM2Y1MWJhNWM2ZTkzMWI2OTYxZGY4YzYyZWI2NmJiZTY2NWM2MWZiNTMzOWMzMTJlZmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.urOXr17syPdxn2bKWZox4B1aLq6JqMtSTDgO9FFFpZE)
Note: Curved sections are not supported yet. I will add this feature soon.
from react-native-gifted-charts.
Thank you for replying, but I need it to be dynamic, meaning the number of progress bars will depend on the number of datasets.
from react-native-gifted-charts.
Related Issues (20)
- When I run in Android device that i am getting this issue HOT 4
- How do we add border radius to semi circle pie charts? HOT 5
- Animate piechart/semi circle HOT 2
- innerCircleBorderWidth not being applied
- Line chart - Multiple lines
- Line chart spacing
- RulesType at LineChart does not work HOT 1
- [BUG]:You specified `onScroll` on a <ScrollView> but not `scrollEventThrottle`. You will only receive one event
- PieChart focusOnPress stops working when onPress prop is provided HOT 1
- dynamic timestamp for xaxis
- date-time xaxis for react native HOT 1
- Pointer Config and Pointer Label component is not responsive in line graph. HOT 1
- first and last xAxisLabel are cut-off
- Invariant Violation: requireNativeComponent: "RNSVGRadialGradient" was not found in the UIManager. HOT 1
- onPress usage with LineChart HOT 3
- yaxisoffset issue HOT 1
- Long Press does not immediately trigger pointer if activatePointersOnLongPress=true HOT 1
- Data points are vertically off-center by x-axis thickness HOT 1
- Scroll Indicator is positioned too far below chart, no inset customization prop provided HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-gifted-charts.