Redesign chart

components/chart/tick-list.js

@@ -1,29 +1,31 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import Tick from './tick'
 
 import { getTickList } from '../helpers/chart'
 
-import styles from './styles'
-
 const TickList = ({ height }) => {
+
   return (
-    <View style={[styles.yAxis, { height }]}>{
-      getTickList(height)
-        .map(({ label, position, isBold, shouldShowLabel}) => {
-          return (
-            <Tick
-              key={label}
-              yPosition={position}
-              isBold={isBold}
-              shouldShowLabel={shouldShowLabel}
-              label={label}
-            />
-          )
-        })
-    }</View>
+    <View style={[styles.container, height]}>
+      {
+        getTickList(height)
+          .map(({ isBold, label, position, shouldShowLabel, tickHeight}) => {
+            return (
+              <Tick
+                height={tickHeight}
+                isBold={isBold}
+                key={label}
+                label={label}
+                shouldShowLabel={shouldShowLabel}
+                yPosition={position}
+              />
+            )
+          })
+      }
+    </View>
   )
 }
 
@@ -31,4 +33,10 @@ TickList.propTypes = {
   height: PropTypes.number,
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})
+
 export default TickList