malaa-tech / react-native-simple-line-chart

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

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

npm install react-native-simple-line-chart

or

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

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

react-native-simple-line-chart's Issues

in ios the graph disappear when changing the duration of graph

Chart not showing up on Android

I've noticed a weird issue on Android where the chart isn't visible the first time it's supposed to render. However, when the chart data gets updated, it shows up and seems to work just fine
Looks like it might only be a problem on the first render and only on Android.

For more details, here's a Simple Example of what I'm talking about.

2024-01-05.08.18.06.mp4

Screen.Recording.2024-01-05.at.8.48.22.AM.mov

React Native 0.70.0

Hello,

I am looking forward to trying your library out, but I am using react-native 0.68.

Is there a particular reason for putting react-native >= 0.70.0 in your peerDependencies list?

Thanks a lot!