rn-circular-chart v1.0.17

React Native Circular Chart Documentation

Import components

1. yarn add rn-circular-chart
2. yarn add react-native-svg install peer dependencies
3. use with ES6 syntax to import components import { DonutChart } from "rn-circular-chart";

Quick Example

import { DonutChart } from "rn-circular-chart";

<View style={styles.sectionWrapper}>
  <DonutChart
    data={[
                    {name: "my Name", value: 1000, color:'#AA86F7'},
                    {name: "Name", value: 3000, color:'#94D5FA'},
                    {name: "ac Name", value: 4000, color:'#8F9FF5'}
                ]}
    strokeWidth={15}
    radius={90}
    containerWidth={width - PADDING * 2} // width comes from Dimensions
    containerHeight={105 * 2}
    type="round"
    startAngle={0}
    endAngle={360}
    animationType="slide"
    centerLabel={ {"label":'CURRENT VALUE',"labelValue":"₹20,34,343" }}
  />
</View>

const styles = StyleSheet.create({
  sectionWrapper: {
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderRadius: 8,
    borderColor: "lightgray",
    backgroundColor: "#ffffff",
    marginVertical: 8,

    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },
});

Circule Props

More information

This library is built on top of the following open-source projects:

• react-native-svg (https://github.com/react-native-svg/react-native-svg)