1.0.6 • Published 9 months ago

react-native-cs-piechart v1.0.6

Weekly downloads
-
License
ISC
Repository
-
Last release
9 months ago

:chart_with_upwards_trend: Using this package you can create a top-notch piechart with a lot of customization.

React Native CS Piechart Documentation

Installation

  1. npm i react-native-cs-piechart
  2. npm 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

PropertyTypeDescription
piechartsizenumberUse to set the size of the piechart circle
labelsizenumberUse to set the size of the piechart label
dataobjectPass data here in the above data format
marginnumberSet margin for the whole piechart with label
paddingnumberSet padding for the whole piechart with label