Giter VIP home page Giter VIP logo

react-native-chart's Introduction

react-native-chart

Join the chat at https://gitter.im/tomauty/react-native-chart npm version

react-native-chart is a simple module for adding line charts, area charts, or bar charts to your React Native app.

NOTE! The current major version (1.X.Y) is still being developed. If you are looking for the most recent iOS-only version, please download ^0.1.4.

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

Properties

Property Type Description Required Default
data Array< [number, number] > An array of [x, y] pairs. Yes
type string pie/bar/line Yes bar
color string Color of bars/line in line chart No #4DC4E6
cornerRadius number Corner radius of bars in bar chart No 0
fillColor string Fill area color in line chart No
dataPointColor string Stroke color for line chart data point No
dataPointFillColor string Fill color 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
xAxisHeight number Height of X-axis container No 20
yAxisTransform Function Transform data point to y-axis label No (_) => _
yAxisWidth number Width of the Y-axis container No 30

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.