Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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}'

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.


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}>


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


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