react-native-chart-joyrry

react-native-chart

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

Getting Started

1. npm i react-native-chart --save

Link ART to your project

1. Right click Libraries and click 'Add Files to {YourProject}'

1. Navigate to your project's node_modules/react-native/Libraries/ART and select 'ART.xcodeproj'

1. Go to Build Phases -> Link Binary With Libraries

4 Click the '+', and add libART.a

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.

Property	Type	Description	Required	Default
data	Array< Array< [number, number] > >	An array of arrays of [x, y] pairs.	Yes
type	string	pie/bar/line	Yes	bar
color	Array < string >	Color of bars/line in line chart	No	#4DC4E6
cornerRadius	number	Corner radius of bars in bar chart	No	0
fillColor	Array < string >	Fill area colors in line chart	No
dataPointColor	Array < string >	Stroke colors for line chart data point	No
dataPointFillColor	Array < string >	Fill colors for line chart data point	No
dataPointRadius	number	Radius of the data point	No	3
lineWidth	number	Width of line chart line	No	1
showDataPoint	boolean	Show data points on line chart	No	false
sliceColors	Array < string >	Array of colors for pie chart slices	Yes	[ < random colors > ]
axisColor	string	Color of axis lines	No	#333333
axisLabelColor	string	Color of axis test	No	#333333
axisLineWidth	number	Width of axis lines	No	1
gridColor	string	Color of grid lines	No	#333333
gridLineWidth	number	Width of grid lines	No	0.5
hideHorizontalGridLines	boolean	Hide grid lines going from LTR	No	false
hideVerticalGridLines	boolean	Hide grid lines going up -> down	No	false
showAxis	boolean	Show the X and Y axes	No	true
showGrid	boolean	Show the grid	No	true
showXAxisLabels	boolean	Show X-Axis labels	No	true
showYAxisLabels	boolean	Show Y-Axis labels	No	true
style	object	Style on the container	No	{}
tightBounds	boolean	Tighten min and max bounds strictly to min/max in dataset	No	false
verticalGridStep	number	How many vertical grid lines to show	No	4
horizontalGridStep	number	How many horizontal grid lines to show	No	all
xAxisHeight	number	Height of X-axis container	No	20
yAxisTransform	Function	Transform data point to y-axis label	No	(_) => _
xAxisTransform	Function	Transform data point to x-axis label	No	(_) => _
yAxisWidth	number	Width of the Y-axis container	No	30
yAxisUseDecimal	boolean	Show decimals on Y-axis labels	No	false
yAxisShortLabel	boolean	Shorten yAxis labels with K, M, B for thousand<->billion, etc	No	false

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 [e-mail] for support.