Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-simple-line-chart

Malaa-tech2.6kMIT0.36.1TypeScript support: included

A fast, interactive, animated and simple line chart component for React Native

React Native, Line Chart, Charts, Chart Library, UI Component, Graphs

readme

License

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

📦 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 + react-native-gesture-handler + 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 ( <GestureHandlerRootView style={{ flex: 1 }}> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <LineChart lines={[ { data: [ { y: 10, x: new Date('2020-01-01').getTime(), extraData: { formattedValue: '0', formattedTime: '2020-01-01', }, }, { y: 20, x: new Date('2020-01-02').getTime(), extraData: { formattedValue: '20', formattedTime: '2020-01-02', }, }, { y: 15, x: new Date('2020-01-03').getTime(), extraData: { date: new Date('2020-01-03').getTime(), formattedValue: '15$', formattedTime: '2020-01-03', }, }, { y: 35, x: new Date('2020-01-04').getTime(), extraData: { formattedValue: '35$', formattedTime: '2020-01-04', }, }, { y: 5, x: new Date('2020-01-06').getTime(), extraData: { formattedValue: '35$', formattedTime: '2020-01-04', }, }, ], activePointConfig: { color: 'black', showVerticalLine: true, }, lineColor: 'pink', curve: 'linear', endPointConfig: { color: 'pink', radius: 5, animated: true, }, activePointComponent: (point) => { return ( <View style={{ backgroundColor: 'pink', padding: 10, borderRadius: 10, }} > <Text style={{ color: 'white' }}> {point?.extraData?.formattedValue} </Text> <Text style={{ color: 'white' }}> {point?.extraData?.formattedTime} </Text> </View> ); }, }, ]} backgroundColor={undefined} height={200} width={Dimensions.get('screen').width} /> </View> </GestureHandlerRootView> ); } `

📖 Docs

Click here for docs and type defs