📊 Add line, area, pie, and bar charts to your React Native app
Clone or download
Latest commit b9d1ade Jul 8, 2017

README.md

react-native-chart

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

Screenshot

Getting Started

NPM

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

Link ART to your project

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

screen shot 2016-06-17 at 3 39 24 pm

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

screen shot 2016-06-17 at 3 39 42 pm

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

screen shot 2016-06-17 at 3 40 00 pm

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

screen shot 2016-06-17 at 3 40 03 pm

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.

Property Type Description Required Default
data Array< Array< [number, number] > > An array of arrays of [x, y] pairs. Yes
type string pie/bar/line Yes bar
color Array < string > Color of bars/line in line chart No #4DC4E6
cornerRadius number Corner radius of bars in bar chart No 0
fillColor Array < string > Fill area colors in line chart No
dataPointColor Array < string > Stroke colors for line chart data point No
dataPointFillColor Array < string > Fill colors for line chart data point No
dataPointRadius number Radius of the data point No 3
lineWidth number Width of line chart line No 1
showDataPoint boolean Show data points on line chart No false
sliceColors Array < string > Array of colors for pie chart slices Yes [ < random colors > ]
axisColor string Color of axis lines No #333333
axisLabelColor string Color of axis test No #333333
axisLineWidth number Width of axis lines No 1
gridColor string Color of grid lines No #333333
gridLineWidth number Width of grid lines No 0.5
hideHorizontalGridLines boolean Hide grid lines going from LTR No false
hideVerticalGridLines boolean Hide grid lines going up -> down No false
showAxis boolean Show the X and Y axes No true
showGrid boolean Show the grid No true
showXAxisLabels boolean Show X-Axis labels No true
showYAxisLabels boolean Show Y-Axis labels No true
style object Style on the container No {}
tightBounds boolean Tighten min and max bounds strictly to min/max in dataset No false
verticalGridStep number How many vertical grid lines to show No 4
horizontalGridStep number How many horizontal grid lines to show No all
xAxisHeight number Height of X-axis container No 20
yAxisTransform Function Transform data point to y-axis label No (_) => _
xAxisTransform Function Transform data point to x-axis label No (_) => _
yAxisWidth number Width of the Y-axis container No 30
yAxisUseDecimal boolean Show decimals on Y-axis labels No false
yAxisShortLabel boolean Shorten yAxis labels with K, M, B for thousand<->billion, etc No false

TODO

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

Info/Support

Work prior to repo transfer on Feb 1, 2015 was the work of Hyun Cho @ OneFold.

Email tom.auty@gmail.com for support.