https://github.com/malaa-tech/react-native-simple-line-chart
A fast, interactive and simple line chart component for React Native 📈
https://github.com/malaa-tech/react-native-simple-line-chart
android chart ios line react-native reanimated reanimated3
Last synced: 3 months ago
JSON representation
A fast, interactive and simple line chart component for React Native 📈
- Host: GitHub
- URL: https://github.com/malaa-tech/react-native-simple-line-chart
- Owner: Malaa-tech
- License: mit
- Created: 2023-01-14T13:12:08.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-18T11:11:24.000Z (over 1 year ago)
- Last Synced: 2024-04-29T21:47:53.087Z (over 1 year ago)
- Topics: android, chart, ios, line, react-native, reanimated, reanimated3
- Language: TypeScript
- Homepage:
- Size: 1.46 MB
- Stars: 59
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://github.com/Malaa-tech/react-native-simple-line-chart)
# React Native Simple Line Chart
A simple, interactive, animated, and fast Line Chart component for React Native.
### 🦄 Features
- ✅ Supports RTL languages
- ✅ Customizable active point component
- ✅ Linear gradient line color
- ✅ Supports different curve types
- ✅ Full utilization of reanimated and shared values
- ✅ Supports area chart presentation
- ✅ Supports transition animations
### How we use it in Malaa App
### 🔮 Example App Demo
- run it your self using ```yarn example [ios/andriod]``` or watch this [Video](https://user-images.githubusercontent.com/24798045/216169227-8044461f-9d2d-4990-b3aa-c15e2b3464e2.mp4)
## 📦 Installation
```bash | pure
npm install react-native-simple-line-chart
```
or
```bash | pure
yarn add react-native-simple-line-chart
```
⚠️ Make sure you have [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) + [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) + [react-native-svg](https://github.com/software-mansion/react-native-svg) installed in your project.
## ⚒️ Usage
```tsx | pure
import * as React from 'react';
import { View, Dimensions, Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import LineChart from 'react-native-simple-line-chart';
export default function App() {
return (
{
return (
{point?.extraData?.formattedValue}
{point?.extraData?.formattedTime}
);
},
},
]}
backgroundColor={undefined}
height={200}
width={Dimensions.get('screen').width}
/>
);
}
```
## 📖 Docs
[Click here for docs and type defs](https://github.com/Malaa-tech/react-native-simple-line-chart/blob/main/docs/globals.md)