Skip to content

Personalized graphs featuring customizable options for React Native app πŸ“ˆ

License

Notifications You must be signed in to change notification settings

SimformSolutionsPvtLtd/react-native-graph-kit

Repository files navigation

react-native-graph-kit

@shopify/react-native-skia react-native-graph-kit on npm npm downloads Android iOS MIT


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

License