chart-kit example

gistfile1.txt

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Dimensions
} from 'react-native';

const screenWidth = Dimensions.get("window").width;
import { LineChart } from "react-native-chart-kit";

const chartConfig = {
  backgroundColor: '#e26a00',
  color: ( opacity = 1) => `rgba(26,255,146, ${opacity})`,
  labelColor: ( opacity = 1) => `rgba(255,255,255, ${opacity})`,
  style: {
    borderRadius: 16
  },
  propsForDots: {
    r: "6",
    strokeWidth: "2",
    stroke: "#ffa726",
  },
  strokeWidth: 2,
};

const data = {
  labels: [ "January", "February", "March", "April", "May", "June" ],
  datasets: [
    {
      data: [ 20, 45, 28, 80, 99, 45 ],
      color: ( opacity = 1) => `rgba(134,65, 244, ${opacity})`,
      strokeWidth: 2,
    }
  ],
  legend: [],
};


class App extends React.Component {
  render() {
    
    return(
      <View style={{alignItems: 'center', marginLeft: 1, marginRight: 1 }}>
        <Text>Hello world</Text>
        <LineChart
          data={data}
          width={screenWidth-2}
          height={256}
          yAxisSuffix={"k"}
          verticalLabelRotation={30}
          chartConfig={chartConfig}
          bezier
          style={{
            marginVertical: 8,
            borderRadius: 16
          }}
        />
      </View>
    )
  }
};

export default App;

package.json content,
{
  "name": "C",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-chart-kit": "^4.3.0",
    "react-native-svg": "^9.13.6"
  },
  "devDependencies": {
    "@babel/core": "7.7.7",
    "@babel/runtime": "7.7.7",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.3",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}