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
• Show animation when populating the chart

Getting Started

• npm install react-native-chart --save
• In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
• Go to node_modules ➜ react-native-chart and add RNChart.xcodeproj
• In XCode, in the project navigator, select your project. Add libRNChart.a to your project's Build Phases ➜ Link Binary With Libraries
• Click RNChart.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.
• Run your project (Cmd+R)

Usage

var React = require('react-native');
var RNChart = require('react-native-chart');

var {
    StyleSheet, View, Component,
} = React;

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

var 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,
        showDataPoint:false,
        data:[
            10, 12, 14, 25, 31, 52, 41, 31, 52, 66, 22, 11
        ]
    }
];

var 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}>
                </RNChart>
            </View>
        );
    }
}

Properties

All properties are optional otherwise noted

General

• chartData (Dictionary) - : 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 - (color) - Line chart only: area fill color / If not specified, the line will not be filled
  • lineWidth - (CGFloat) - Line chart only: line width / Default: 1.0
  • widthPercent - (CGFloat) - Bar chart only: [0 - 1.0], 0.1 means very skinny, 1.0 means bars touch each other / Default: 0.5
  • showDataPoint - (BOOL) - show or hide the data points / Default: false
  • dataPointColor - (color) - outline color of the data point / Default: blue
  • dataPointFillColor - (color) - fill color of the data point / Default: blue
  • dataPointRadius - (CGFloat) - the circel radius of the data point / Default: 1.0

• 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

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

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

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

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

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

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

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

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

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

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

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

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

Known Issues / TODO

• Sample code cleanup
• Needs touch support
• Needs legend
• Stack Bar Chart
• Multi Line Chart
• Scatter/Bubble chart
• Pie chart

Support

Email [e-mail] or [e-mail]