React-native-animated-chart NPM

Alt text

Instalation

yarn add react-native-animated-chart

Usage

import { View, StyleSheet, Dimensions } from "react-native"
import AnimatedChart from react-native-animated-chart

const { width } = Dimensions.get("window")
const startDate = new Date("2019-09-01").getTime()
const numberOfMonths = 7

const ChartComponent = (props) => {
  return (
    <Graph
      data={data}
      startDate={startDate}
      numberOfMonths={numberOfMonths}
      numberOfRanges={4}
      width={width}
      height={197}
    />
  )
}

export default ChartComponent

Documentation (props)

Props	Type	Default
data	Array<{date: number; value: number; color: string}>	Required
startDate	number	Required
width?	number	Optional
height?	number	Optional
numberOfMonths?	number	Optional
numberOfRanges?	number	Optional
barStyle?	{topStyle: ViewStyle; bodyStyle: ViewStyle}	Optional
yAxisStyle?	{wrap: ViewStyle; text: TextStyle}	Optional
xAxisStyle?	{wrap: ViewStyle; text: TextStyle}	Optional
linesConfig?	{visible: boolean; style: ViewStyle}	Optional
animationConfig?	{type: "Spring" / "Timing"; duration: number}	Optional