JSPM – react-native-circular-chart-current@1.1.1

Package Exports

react-native-circular-chart-current
react-native-circular-chart-current/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-circular-chart-current) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

video demo

React Native Circular Chart Documentation

Import components

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

Quick Example

import { DonutChart } from "react-native-circular-chart";

<View style={styles.sectionWrapper}>
  <DonutChart
    data={DATA}
    strokeWidth={15}
    radius={90}
    containerWidth={width - PADDING * 2}
    containerHeight={105 * 2}
    type="round"
    startAngle={0}
    endAngle={360}
    animationType="slide"
  />
</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

Property	Type	Description
data	Array<{name: string; value: number; color: string;}>	Defines the data for circular
containerWidth	number	Defines the width of container
containerHeight	number	Defines the height of container
radius	number	Defines the radius of circular
startAngle	number (degree)	Defines the start point of the circular. default start from -115 deg
endAngle	number (degree)	Defines the start point of the circular. default start from 115 deg
strokeWidth	number	Defines the thickness of circular item
type	'butt', 'round'	Defines the type of circular item
animationType	'fade', 'slide'	Defines the animation type for chart item
labelValueStyle	StyleProp	Defines the style for data.value
labelTitleStyle	StyleProp	Defines the style for data.name
labelWrapperStyle	StyleProp	Defines the style for wrapper of data.value and data.name
containerStyle	StyleProp	Defines the style for container of chart

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)