Skip to content

Novsochetra/react-native-circular-chart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

demo.mov

React Native Circular Chart Documentation

Import components

  1. yarn add react-native-circular-chart
  2. yarn add react-native-svg install peer dependencies
  3. 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: