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.
LineChart | BarChart |
---|---|
![]() |
![]() |
Installation | Charts | Properties | Example | License
npm install react-native-graph-kit @shopify/react-native-skia
yarn add react-native-graph-kit @shopify/react-native-skia
cd ios && pod install
And you are good to begin.
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.
type ChartDataType = {
xAxis: {
labels: string[]
},
yAxis: {
datasets: number[]
}
};
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]
}
};
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;
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 | âī¸ | âī¸ |
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 | â¤Ģ | âī¸ |
A full working example project is here Example
yarn
yarn example ios // For ios
yarn example android // For Android
- Add option to enable Parametric Curve
Support it by joining stargazers for this repository.â
For bugs, feature requests, and discussion please use GitHub Issues, GitHub New Feature, GitHub Feedback
We'd love to have you improve this library or fix a problem đĒ Check out our Contributing Guide for ideas on contributing.
- Check out our other available awesome mobile libraries