Skip to content

Instantly share code, notes, and snippets.

@Jpadilla1
Created February 10, 2016 15:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save Jpadilla1/5c8f8067225fac40b370 to your computer and use it in GitHub Desktop.
Save Jpadilla1/5c8f8067225fac40b370 to your computer and use it in GitHub Desktop.
react-native-ios-charts LineChart example
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 (
<View style={styles.container}>
<LineChart config={config} style={styles.chart}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: 'white',
paddingTop: 40,
paddingBottom: 40,
paddingLeft: 10,
paddingRight: 20
},
chart: {
flex: 1
}
});
@esutton
Copy link

esutton commented Mar 25, 2016

Where is the line series data?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment