react-native-charts-wrapper
Version:
A react-native charts support both android and ios.
93 lines (77 loc) • 1.95 kB
JavaScript
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View, processColor
} from 'react-native';
import {BarChart} from 'react-native-charts-wrapper';
class StackedBarChartScreen extends React.Component {
constructor() {
super();
this.state = {
legend: {
enabled: true,
textSize: 14,
form: "SQUARE",
formSize: 14,
xEntrySpace: 10,
yEntrySpace: 5,
wordWrapEnabled: true
},
data: {
dataSets: [{
values: [[40, 30, 20], [10, 20, 10], [30, 20, 50], [30, 50, 10]],
label: 'Stacked Bar dataset',
config: {
colors: [processColor('#C0FF8C'), processColor('#FFF78C'), processColor('#FFD08C')],
stackLabels: ['Engineering', 'Sales', 'Marketing']
}
}],
},
xAxis: {
valueFormatter: ['Q1', 'Q2', 'Q3', 'Q4'],
granularityEnabled: true,
granularity: 1
}
};
}
handleSelect(event) {
let entry = event.nativeEvent
if (entry == null) {
this.setState({...this.state, selectedEntry: null})
} else {
this.setState({...this.state, selectedEntry: JSON.stringify(entry)})
}
}
render() {
return (
<View style={{flex: 1}}>
<View style={{height:80}}>
<Text> selected entry</Text>
<Text> {this.state.selectedEntry}</Text>
</View>
<View style={styles.container}>
<BarChart
style={styles.chart}
xAxis={this.state.xAxis}
data={this.state.data}
legend={this.state.legend}
drawValueAboveBar={false}
onSelect={this.handleSelect.bind(this)}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF'
},
chart: {
flex: 1
}
});
export default StackedBarChartScreen;