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

1. Define chart components in Javascript file and see rendered charts using Core Graphics and CALayer
2. Supports line charts with options to show data points, line fill, customized color, customized labels, etc...
3. Supports bar charts
4. Supports multiple charts in one view
5. Show animation when populating the chart

Getting Started

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,
    showDataPoint: false,
    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.

• 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

• 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
• Pie chart
• Testing w/ Travis CI

Info/Support

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

Email [email protected] for support.