react-native-chart

react-native-chart

react-native-chart is a simple module for adding line charts, area charts, or bar charts to your React Native app.

Features

• Define chart components in Javascript file and see rendered charts using Core Graphics and CALayer
• Supports line charts with options to show data points, line fill, customized color, customized labels, etc...
• Supports bar charts
• Supports multiple charts in one view
• Supports pie chart
• Show animation when populating the chart

Getting Started

• npm install react-native-chart --save

• I recommend using rnpm for linking.

  2a. npm install -g rnpm

  2b. rnpm link

If you'd rather not use rnpm, you can link the library as described here.

Usage

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

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'white',
	},
	chart: {
		position: 'absolute',
		top: 16,
		left: 4,
		bottom: 4,
		right: 16,
	}
});

const chartData = [
	{
		name: 'BarChart',
		type: 'bar',
		color:'purple',
		widthPercent: 0.6,
		data: [30, 1, 1, 2, 3, 5, 21, 13, 21, 34, 55, 30],
	},
	{
		name: 'LineChart',
		color: 'gray',
		lineWidth: 2,
		highlightIndices: [1, 2],	// The data points at indexes 1 and 2 will be orange
		highlightColor: 'orange',
		showDataPoint: true,
		data: [10, 12, 14, 25, 31, 52, 41, 31, 52, 66, 22, 11],
	}
];

const xLabels = ['0','1','2','3','4','5','6','7','8','9','10','11'];

class SimpleChart extends Component {
	render() {
		return (
			<View style={styles.container}>
				<RNChart style={styles.chart}
					chartData={chartData}
					verticalGridStep={5}
					xLabels={xLabels}
				 />
			</View>
		);
	}
}

Properties

All properties are optional otherwise noted

General

• chartData (ObjectArray) - : one nested block produces one type of chart

  • data - (NumberArray) - Y axis values / Required
  • name - (String) - name of the plot
  • type - (String) - "line" or "bar" / Default: line"
  • fillColor - (String/Color) - Line chart only: area fill color / If not specified, the line will not be filled
  • lineWidth - (Float) - Line chart only: line width / Default: 1.0
  • widthPercent - (Float) - Bar chart only: [0 - 1.0], 0.1 means very skinny, 1.0 means bars touch each other / Default: 0.5
  • showDataPoint - (Boolean) - show or hide the data points / Default: false
  • dataPointColor - (String/Color) - outline color of the data point / Default: blue
  • dataPointFillColor - (String/Color) - fill color of the data point / Default: blue
  • dataPointRadius - (Float) - the radius of the data point / Default: 1.0
  • cornerRadius - (Float) corner radius of the bars in a bar chart / Default: 1.0 / If 0, it will be completely rectangular.
  • highlightColor - (String/Color) - the color of the highlighted data points at the highlight indices. this will override dataPointColor and dataPointFillColor.
  • highlightIndices - (NumberArray) - the indices to apply the highlightColor
  • highlightRadius - (Float) - the radius of a highlighted data point / Default: 1.0
  • pieAngle (Float) - The angle where the chart drawing begins. Clockwise. / Default: 0/360
  • pieCenterRatio (Float) - [0 - 1.0], 0 means pie chart completely filled, 1.0 means the actual data is a very tiny line. / Default: 0
  • pieCenterView (Renderable) - The view that will be placed in the center of the pie chart. Will skip rendering if pieCenterRatio is set to 0.
  • sliceColors (Array) - array of colors for the pie chart slices. matched by index with the chartData.data array. if fewer specified, it will start from 0 again.

• animationDuration (Float) - duration of the animation in seconds / Default: 0.3

• axisColor (String/Color) - color of the X and Y axes / Default: lightgray

• axisLineWidth (Float) - width of the axis line / Default: 1

• axisTitleColor (String/Color) - color of the title of the axes / Default: gray

• axisTitleFontSize (Integer) - font size of axis titles / Default: 10

• chartTitle (String) - title of the chart

• chartTitleColor (String/Color) - color of the chart title / Default: gray

• gridColor (String/Color) - color of the grid / Default: lightgray

• gridLineWidth (Float) - width of the grid line / Default: 0.5

• labelFontSize (Integer) - font size of axis labels / Default: 10

• labelTextColor (String/Color) - text color of axis labels / Default: gray

• showAxis (Boolean) - show or hide axis / Default: true

• showGrid (Boolean) - show or hide grid / Default: true

• showXAxisLabels (Boolean) - show or hide axis labels for the X axis / Default: true

• showYAxisLabels (Boolean) - show or hide axis labels for the Y axis / Default: true

• tightBounds (Boolean) - constrict Y axis to min/max of values instead of max/minning with 0 / Default: false

• verticalGridStep (Integer) - number of Y axis grids / Default: 3

• xAxisTitle (String) - Title for the x-axis

• xLabels (StringArray) - array of all X axis label strings. This determines the X-axis grid as well. Need to match the number of input data in chartData / Required

• yAxisTitle (String) - Title for the y-axis

Known Issues / TODO

• Sample code cleanup
• Needs touch support
• Needs legend
• Stack Bar Chart
• Multi Line Chart
• Scatter/Bubble chart
• Testing w/ Travis CI

Info/Support

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

Email [e-mail] for support.