/react-native-chart

:bar_chart: Add line, area, pie, and bar charts to your React Native app

Primary LanguageObjective-CMIT LicenseMIT

react-native-chart

Join the chat at https://gitter.im/tomauty/react-native-chart npm version

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

Screenshot

Getting Started

NPM

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

  2. 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
    • sliceColors (Array) - array of colors for the pie chart slices. matched by index with the chartData.data array. if fewer specified, remaining slices will be blue for now. Required for pie chart
  • 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

  • hideHorizontalGridLines (Boolean) - hides the horizontal grid lines when showGrid is true / Default: false

  • hideVerticalGridLines (Boolean) - hides the vertical grid lines when showGrid is true / Default: false

  • 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 tom.auty@gmail.com for support.