📈 Using this package you can create a top-notch piechart with a lot of customization.
React Native CS Piechart Documentation
Installation
npm i react-native-cs-piechartnpm i react-native-svg
Data Format
const data = [
{
name: "React-Native",
num: 10,
color: "#AADEA7"
},
{
name: "Android",
num: 7,
color: "#FEAE65"
}
]Example
First import the following statements import Piechart from "react-native-cs-piechart";
import Piechart from 'react-native-cs-piechart';
const data = [ // Your data in above data format ];
const App = () => {
return (
<View style={styles.maincontainer}>
<View style={styles.cardview}>
<Text style={styles.heading}>Pie-chart</Text>
<Piechart piechartsize={180} labelsize={180} data={data} /> // Here
</View>
</View>
);
};Additional Properties
| Property | Type | Description |
|---|---|---|
| piechartsize | number | Use to set the size of the piechart circle |
| labelsize | number | Use to set the size of the piechart label |
| data | object | Pass data here in the above data format |
| margin | number | Set margin for the whole piechart with label |
| padding | number | Set padding for the whole piechart with label |