react-native-ios-charts LineChart example

February 10, 2016 ยท View on GitHub

import React, { AppRegistry, Component, StyleSheet, Text, View } from 'react-native';

import { LineChart } from 'react-native-ios-charts';

class charts extends Component { render() { const config = { dataSets: [{ values: [-1, 1, -1, 1, -1, 1], drawValues: false, colors: ['rgb(199, 255, 140)'], label: 'Sine function', drawCubic: true, drawCircles: false, lineWidth: 2 }, { values: [1, -1, 1, -1, 1, -1], drawValues: false, colors: ['rgb(255, 247, 141)'], label: 'Cosine function', drawCubic: true, drawCircles: false, lineWidth: 2 }], backgroundColor: 'transparent', labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], minOffset: 20, scaleYEnabled: false, legend: { textSize: 12 }, xAxis: { axisLineWidth: 0, drawLabels: false, position: 'bottom', drawGridLines: false }, leftAxis: { customAxisMax: 1, customAxisMin: -1, labelCount: 11, startAtZero: false }, rightAxis: { enabled: false, drawGridLines: false }, valueFormatter: { minimumSignificantDigits: 1, type: 'regular', maximumDecimalPlaces: 1 } }; return ( ); } }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'stretch', backgroundColor: 'white', paddingTop: 40, paddingBottom: 40, paddingLeft: 10, paddingRight: 20 }, chart: { flex: 1 } });