react-native-graph-kit

React Native Graph Kit is a powerful library that is built using @shopify/react-native-skia to provide LineChart and BarChart components with interactive tooltips for your React Native applications. With this library, you can effortlessly visualize your data in a clean and intuitive manner, making it easier than ever for users to understand complex datasets.

ℹ️ Compatibility Notice: This library is designed to work seamlessly with @shopify/react-native-skia version <=0.1.228. Make sure to use this version for optimal compatibility.

• It also provides an example app and a detailed usage overview of both the components.
• Both the available components are fully Android and iOS compatible.

🎬 Preview

LineChart	BarChart

Quick Access

Installation | Charts | Properties | Example | License

Installation

1. Install library and @shopify/react-native-skia

npm install react-native-graph-kit @shopify/react-native-skia

--- or ---

yarn add react-native-graph-kit @shopify/react-native-skia

2. Install cocoapods in the ios project

cd ios && pod install

And you are good to begin.

Charts

BarChart	LineChart

• LineChart: Create elegant line charts to showcase trends and patterns in your data.
• BarChart: Display data using visually appealing bar charts, making comparisons at a glance.

ChartDataType

type ChartDataType = {
  xAxis: {
    labels: string[]
  },
  yAxis: {
    datasets: number[]
  }
};

ChartDataFormat

const data = {
  xAxis: {
    labels: [
      'Alice',
      'Bob',
      'Charlie',
      'Liam',
      'Mia',
      'Nora',
      'Oliver',
      'Penelope',
      'Quinn',
      'Ryan',
      'Sophia'
    ]
  },
  yAxis: {
    datasets: [230, 75, 100, 500, 387, 655, 30, 60, 400, 500, 687]
  }
};

Usage

Basic Example

import React from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';
import { BarChart, LineChart } from 'react-native-graph-kit';

const data = {
  xAxis: {
    labels: [
      'Alice',
      'Bob',
      'Charlie',
      'Liam',
      'Mia',
      'Nora',
      'Oliver',
      'Penelope',
      'Quinn',
      'Ryan',
      'Sophia'
    ]
  },
  yAxis: {
    datasets: [120, 350, 400, 70, 87, 655, 10, 20, 400, 70, 87]
  }
};

const App = () => (
  <SafeAreaView style={styles.screen}>
    <View style={styles.chartContainer}>
      <BarChart
        chartData={data}
        barWidth={30}
        barGap={70}
        horizontalGridLineColor={'grey'}
        chartHeight={300}
        yAxisMax={1000}
      />
    </View>
    <View style={styles.chartContainer}>
      <LineChart yAxisMax={1000} chartData={data} xAxisLength={70} initialDistance={30} />
    </View>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  screen: {
    flex: 1
  },
  chartContainer: {
    flex: 1,
    borderRadius: 10,
    borderWidth: 0.5,
    borderColor: 'lightgrey',
    padding: 10,
    margin: 10,
    shadowColor: 'lightgrey',
    shadowOpacity: 1,
    backgroundColor: 'white',
    shadowOffset: {
      height: 6,
      width: 5
    }
  }
});

export default App;

Properties

Chart Props

Tooltip Props

Example

A full working example project is here Example

yarn
yarn example ios   // For ios
yarn example android   // For Android

TODO

• [ ] Add option to enable Parametric Curve

Find this library useful? ❤️

Support it by joining stargazers for this repository.⭐

Bugs / Feature requests / Feedbacks

For bugs, feature requests, and discussion please use GitHub Issues, GitHub New Feature, GitHub Feedback

🤝 How to Contribute

We'd love to have you improve this library or fix a problem 💪 Check out our Contributing Guide for ideas on contributing.

Awesome Mobile Libraries

• Check out our other available awesome mobile libraries

License

• MIT License