THIS LIBRARY IS NO LONGER MAINTAINED.

See https://github.com/hongyin163/react-native-chart-android and https://github.com/Jpadilla1/react-native-ios-charts

react-native-mpchart

A React Native chart library

This module is a bridge between React Native and MPAndroidChart. Eventually, iOS will be supported via the iOS port of MPAndroidChart, ios-charts.

All charts and properties come from MPAndroidChart.

Installation

Android

Install the node package

npm install --save https://github.com/mikemonteith/react-native-mpchart

Import the java library from node_modules/react-native-mpchart/android

android/settings.gradle

include ':react-native-mpchart', ':app'

project(':react-native-mpchart').projectDir = new File(settingsDir, '../node_modules/react-native-mpchart/android')

Add the project to your gradle dependencies

android/app/build.gradle

apply plugin: 'com.android.application'

android {
  ...
}

dependencies {
  compile fileTree(dir: "libs", include: ["*.jar"])
  compile "com.android.support:appcompat-v7:23.0.0"
  compile "com.facebook.react:react-native:0.19.+"
  compile project(":react-native-mpchart")
}

Add the package to your ReactInstanceManager

MainActivity.java

//import chart package (usually, your IDE will do this for you)
import com.mikemonteith.reactnativempchart.MPChartPackage;

// ...

/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
	return Arrays.<ReactPackage>asList(
		new MainReactPackage(),
		new MPChartPackage() // <-- add this line
	);
}

// ...

Basic Usage

var React = require('react-native');
var Charts = require('react-native-mpchart');

var ExampleComponent = React.createClass({
  render: function(){
    return (
      <Charts.BarChart
        style={{flex: 1}}
        data={{
          dataSets: [{
            values: [1, 2, 3, 4, 5],
          }],
          xValues: ["one", "two", "three", "four", "five"],
        }}
      />
    );
  },
});

Charts

• PieChart
• BarChart
• LineChart

Props

(inherits from React.View)

| Prop | Description | Type | Charts | |------|-------------|------|--------| | data | see data properties | object | All | touchEnabled | handle touch gestures on the chart | boolean | All | xAxis | see xaxis properties | object | Bar, Line | leftAxis | see yaxis properties | object | Bar, Line | rightAxis | see yaxis properties | object | Bar, Line | gridBackgroundColor | color of the grid background | string | Bar, Line | holeRadius | percentage radius of the pie hole | number | Pie | transparentCircleRadius | percentage radius of the transparent overlay | number | Pie | transparentCircleColor | color of the transparent overlay | string | Pie | transparentCircleAlpha | alpha of the transparent overlay between 0 and 1 | number | Pie | rotationAngle | clockwise angle in degrees where the first segment starts (0 = 3 o'clock) | number | Pie

data properties

| Property | Description | Type | Charts | |----------|-------------|------|--------| | dataSets | see dataSet properties | array of DataSet objects | All | | xValues | strings specifying x axis labels | array of strings | All |

dataSet properties

| Property | Description | Type | Charts | |----------|-------------|------|--------| | values | values to plot on the graph | array of numbers | All | colors | colors to draw the chart data | array of strings | All | drawValues | draw value text | boolean | All | drawCircles | draw circles on data points | boolean | Line | drawCubic | draw a smooth line-of-best-fit | boolean | Line | lineWidth | width of the line-of-best-fit | number | Line | drawFill | draw a colored area underneath the line | boolean | Line | fillColor | color of fill underneath the line | string | Line | fillAlpha | alpha of the fill underneath the line between 0 and 1 | number | Line

axis properties

| Property | Description | Type | Charts | |----------|-------------|------|--------| | enabled | draw the axis | boolean | Bar, Line | | drawAxisLine | draw the main axis line | boolean | Bar, Line | drawGridLines | draw grid lines that are parallel to this axis | boolean | Bar, Line

x axis properties

(inherits from axis properties)

| Property | Description | Type | Charts | |----------|-------------|------|--------| | position | where to draw the axis | string 'bottom', 'top' or 'bothSided' | Bar, Line

y axis properties

(inherits from axis properties)

| Property | Description | Type | Charts | |----------|-------------|------|--------| | minValue | minimum value | number | Bar, Line | maxValue | maximum value | number | Bar, Line | inverted | if true, draw the data upside-down | boolean | Bar, Line

TODO

• Support all MPAndroidChart charts
• Support all MPAndroidChart properties
• Support iOS
• Release as npm package