react-native-chart

NOTE: I have not been able to maintain this repo. Recommend switching to Victory Charts.

Screenshot

Getting Started

NPM

  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.

Usage

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}>
                <Chart
                    style={styles.chart}
                    data={data}
                    verticalGridStep={5}
                    type="line"
                    showDataPoint={true}
                    color={['#e1cd00']}
                 />
            </View>
        );
    }
}

Properties

Use '' y-values to signify the 'render but empty' data points.

PropertyTypeDescriptionRequiredDefault
dataArray< Array< [number, number] > >An array of arrays of [x, y] pairs.Yes
typestringpie/bar/lineYesbar
colorArray < string >Color of bars/line in line chartNo#4DC4E6
cornerRadiusnumberCorner radius of bars in bar chartNo0
fillColorArray < string >Fill area colors in line chartNo
dataPointColorArray < string >Stroke colors for line chart data pointNo
dataPointFillColorArray < string >Fill colors for line chart data pointNo
dataPointRadiusnumberRadius of the data pointNo3
lineWidthnumberWidth of line chart lineNo1
showDataPointbooleanShow data points on line chartNofalse
sliceColorsArray < string >Array of colors for pie chart slicesYes[ < random colors > ]
axisColorstringColor of axis linesNo#333333
axisLabelColorstringColor of axis testNo#333333
axisLineWidthnumberWidth of axis linesNo1
gridColorstringColor of grid linesNo#333333
gridLineWidthnumberWidth of grid linesNo0.5
hideHorizontalGridLinesbooleanHide grid lines going from LTRNofalse
hideVerticalGridLinesbooleanHide grid lines going up -> downNofalse
showAxisbooleanShow the X and Y axesNotrue
showGridbooleanShow the gridNotrue
showXAxisLabelsbooleanShow X-Axis labelsNotrue
showYAxisLabelsbooleanShow Y-Axis labelsNotrue
styleobjectStyle on the containerNo{}
tightBoundsbooleanTighten min and max bounds strictly to min/max in datasetNofalse
verticalGridStepnumberHow many vertical grid lines to showNo4
horizontalGridStepnumberHow many horizontal grid lines to showNoall
xAxisHeightnumberHeight of X-axis containerNo20
yAxisTransformFunctionTransform data point to y-axis labelNo() =>
xAxisTransformFunctionTransform data point to x-axis labelNo() =>
yAxisWidthnumberWidth of the Y-axis containerNo30
yAxisUseDecimalbooleanShow decimals on Y-axis labelsNofalse
yAxisShortLabelbooleanShorten yAxis labels with K, M, B for thousand<->billion, etcNofalse

TODO

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

Info/Support

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

Email [email protected] for support.