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

| Prop | Default | Type | Description | BarChart | LineChart | | :---------------------- | :---------- | :------------ | :--------------------------------------------------- | -------- | --------- | | chartData* | null | ChartDataType | Data to plot graphs | ✔️ | ✔️ | | chartHeight | 500 | number | Height of chart in BarChart | ✔️ | ⤫ | | showLines | true | boolean | Control visibility of Y Axis Ref lines on the chart | ✔️ | ✔️ | | lineHeight | 2 | number | Height of horizontal grid lines in BarChart | ✔️ | ⤫ | | lineWidth | 3 | number | The line width value of LineChart | ⤫ | ✔️ | | lineColor | #DE5E69 | ColorValue | The line color of LineChart | ⤫ | ✔️ | | barWidth | 20 | number | The width of the bars in BarChart | ✔️ | ⤫ | | barColor | #DE5E69 | ColorValue | The color of the bars in BarChart | ✔️ | ⤫ | | barRadius | 0 | number | The borderRadius of the bars in BarChart from top | ✔️ | ⤫ | | barGap | 50 | number | X Axis length covered by bars | ✔️ | ⤫ | | labelSize | 18 | number | The fontsize of labels on the chart | ✔️ | ✔️ | | labelColor | #000000 | ColorValue | The font color of chart labels | ✔️ | ✔️ | | labelFontFamily | System Font | ColorValue | The font path that will be applied to chart labels | ✔️ | ✔️ | | horizontalGridLineColor | #D3D3D3 | Color | The Ref lines color | ✔️ | ✔️ | | yAxisMin | 0 | number | The minimum value for the YAxis Plotting | ✔️ | ✔️ | | yAxisMax | auto | number | The maximum value for the YAxis Plotting | ✔️ | ✔️ | | initialDistance | 10 | number | The initial distance of chart from the Y Axis Labels | ✔️ | ✔️ | | xAxisLength | auto | number | Manual distance between x Axis Plotting | ⤫ | ✔️ | | verticalLabel | false | boolean | Handle rotation of X-Axis Labels | ✔️ | ✔️ | | verticalLabelHeight | auto | number | Desired height of the X-Axis | ⤫ | ✔️ | | chartBackgroundColor | #FFFFFF | Color | Chart background color | ✔️ | ✔️ | | xAxisLegend | undefined | string | The X Axis Legend Value | ✔️ | ✔️ | | yAxisLegend | undefined | string | The Y Axis Legend Value | ✔️ | ✔️ | | xLegendStyles | Default | TextStyle | X Axis Legend styles | ✔️ | ✔️ | | yLegendStyles | Default | TextStyle | Y Axis Legend styles | ✔️ | ✔️ |

Tooltip Props

| Prop | Default | Type | Description | BarChart | LineChart | | :----------------------- | :------ | :------ | :-------------------------------------- | -------- | --------- | | displayTooltip | false | boolean | Flag to handle tooltip visibility | ✔️ | ✔️ | | toolTipLabelFontSize | 12 | number | Font size | ✔️ | ✔️ | | toolTipColor | #FF0000 | string | Tooltip color | ✔️ | ✔️ | | toolTipDataColor | #FFFFFF | string | Tooltip data color | ✔️ | ✔️ | | toolTipHorizontalPadding | 20 | number | Tooltip padding | ✔️ | ✔️ | | toolTipFadeOutDuration | 4000 | number | Duration in ms to fade out tooltip | ✔️ | ✔️ | | circularPointerColor | #000000 | string | Color of circular pointer for LineChart | ⤫ | ✔️ |

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