Fix layout on chart view

components/chart/chart.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View, FlatList } from 'react-native'
+import { View, FlatList, ScrollView } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
 import { yAxis, normalizeToScale, horizontalGrid } from './y-axis'
@@ -41,21 +41,23 @@ export default class CycleChart extends Component {
 
   render() {
     return (
-      <View style={{ flexDirection: 'row', marginTop: 50 }}>
+      <ScrollView>
-        {yAxisView}
+        <View style={{ flexDirection: 'row', marginTop: 50 }}>
-        {horizontalGrid}
+          {yAxisView}
-        {<FlatList
+          {horizontalGrid}
-          horizontal={true}
+          {<FlatList
-          inverted={true}
+            horizontal={true}
-          showsHorizontalScrollIndicator={false}
+            inverted={true}
-          data={this.state.columns}
+            showsHorizontalScrollIndicator={false}
-          renderItem={this.renderColumn}
+            data={this.state.columns}
-          keyExtractor={item => item.dateString}
+            renderItem={this.renderColumn}
-          initialNumToRender={15}
+            keyExtractor={item => item.dateString}
-          maxToRenderPerBatch={5}
+            initialNumToRender={15}
-        >
+            maxToRenderPerBatch={5}
-        </FlatList>}
+          >
-      </View>
+          </FlatList>}
+        </View>
+      </ScrollView>
     )
   }
 }