Awesome

react-native-chart

NOTE: I have not been able to maintain this repo. Recommend switching to Victory Charts.

Getting Started

1. npm i react-native-chart --save

Link ART to your project

1. Right click Libraries and click 'Add Files to {YourProject}'

2. Navigate to your project's node_modules/react-native/Libraries/ART and select 'ART.xcodeproj'

3. Go to Build Phases -> Link Binary With Libraries

4 Click the '+', and add libART.a

Then rebuild.

Usage

import React, { StyleSheet, View, Component } from 'react-native';
import Chart from 'react-native-chart';

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'white',
	},
	chart: {
		width: 200,
		height: 200,
	},
});

const data = [[
	[0, 1],
	[1, 3],
	[3, 7],
	[4, 9],
]];

class SimpleChart extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Chart
					style={styles.chart}
					data={data}
					verticalGridStep={5}
					type="line"
					showDataPoint={true}
					color={['#e1cd00']}
				 />
			</View>
		);
	}
}

Properties

Use '' y-values to signify the 'render but empty' data points.

TODO

• Code cleanup
• Multi-line chart
• Horizontal line chart
• Scatter chart