React-Native-Chart-kitでグラフを書く

※ほとんどDocumentの翻訳です。Get Startedだけです。

Get Started

とりあえずDocumentに載っていたQuickExampleを動かしてみる。

yarn add react-native-chart-kit

でインストールしてApp.jsに次のコードを記述。

import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph
} from 'react-native-chart-kit'

const screenWidth = Dimensions.get('window').width;

export default class App extends React.Component {

  render() {
    return (
<View>
  <Text>
    Bezier Line Chart
  </Text>
  <LineChart
    data={{
      labels: ['January', 'February', 'March', 'April', 'May', 'June'],
      datasets: [{
        data: [
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100
        ]
      }]
    }}
    width=screenWidth
    height={220}
    chartConfig={{
      backgroundColor: '#e26a00',
      backgroundGradientFrom: '#fb8c00',
      backgroundGradientTo: '#ffa726',
      decimalPlaces: 2, // optional, defaults to 2dp
      color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
      style: {
        borderRadius: 16
      }
    }}
    bezier
    style={{
      marginVertical: 8,
      borderRadius: 16
    }}
  />
</View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

チャートのスタイルはchartConfigで記述されている。指定できる値はチャートの種類によって違う。Documentにグラフの各種類におけるchartConfigで指定できる値が書いてある。グラフの種類は以下の通り。
・Line
・Bezier Line
・Progress Ring
・Bar
・Pie
・Contribution graph
github.com

レスポンシブな（様々なデバイスの大きさに対応した）グラフを書くにはDimensionsを使って画面サイズを取得して、その値を渡してあげる必要がある。

import { Dimensions } from 'react-native'
const screenWidth = Dimensions.get('window').width

// <LineCharts>タグ内
width=screenWidth