react-native-ios-charts BarChart example
March 27, 2016 ยท View on GitHub
import React, { Component, StyleSheet, View } from 'react-native';
import { BarChart } from 'react-native-ios-charts';
class MyChart extends Component {
render() {
const config = {
dataSets: [{
values: [5, 40, 77, 81, 43, 10, 19, 25, 18, 10],
drawValues: false,
colors: ['rgb(107, 243, 174)'],
label: 'Company A'
}, {
values: [40, 5, 50, 23, 79, 45, 50, 40, 5, 35],
valueTextFontSize: 12,
drawValues: false,
colors: ['rgb(166, 232, 255)'],
label: 'Company B'
}, {
values: [10, 55, 35, 90, 82, 60, 25, 40, 45, 15],
valueTextFontSize: 12,
drawValues: false,
colors: ['rgb(248, 248, 157)'],
label: 'Company C'
}],
backgroundColor: 'transparent',
labels: ['1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999'],
legend: {
position: 'rightOfChart'
},
xAxis: {
axisLineWidth: 0,
textSize: 10
},
leftAxis: {
drawGridLines: false,
spaceTop: 0.18,
textSize: 10
},
rightAxis: {
drawGridLines: false,
enabled: false
},
valueFormatter: {
type: 'regular',
maximumDecimalPlaces: 0
}
};
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 } });
export default MyChart;