Skip to content

Instantly share code, notes, and snippets.

@Jpadilla1
Created February 10, 2016 15:13
Show Gist options
  • Select an option

  • Save Jpadilla1/5c8f8067225fac40b370 to your computer and use it in GitHub Desktop.

Select an option

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

esutton commented Mar 25, 2016

Copy link
Copy Markdown

Where is the line series data?

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