react-native-ios-charts BarChart example

BarChart.js

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 (
      <View style={styles.container}>
        <BarChart 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
  }
});

export default MyChart;