react-native-animated-chart

```javascript yarn add react-native-animated-chart ```

Usage no npm install needed!

<script type="module">
  import reactNativeAnimatedChart from 'https://cdn.skypack.dev/react-native-animated-chart';
</script>

README

Alt text

GitHub | NPM

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