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
node_modules/react-native-mpchart/android
Import the java library from 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) // ... /*** A list of packages used by the app. If the app uses additional views* or modules besides the default ones, add more packages here.*/@Overrideprotected List<ReactPackage> { return Arrays.<ReactPackage>;} // ...
Basic Usage
var React = ;var Charts = ; var ExampleComponent = React;
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