Position date label correctly

components/chart/day-column.js

@@ -26,20 +26,8 @@ export default class DayColumn extends Component {
       bleeding,
       mucus
     } = data
-    const cycleDayNumber = getCycleDayNumber(dateString)
-    const shortDate = dateString.split('-').slice(1).join('-')
     const nfpLineInfo = getFhmAndLtlInfo(dateString, temperature)
 
-    //TODO move these so they are visible
-    const cycleDayLabel = (
-      <Text {...label.number} y={config.cycleDayNumberRowY}>
-        {cycleDayNumber}
-      </Text>)
-    const dateLabel = (
-      <Text {...label.date} y={config.dateRowY}>
-        {shortDate}
-      </Text>
-    )
     const columnElements = []
     if (typeof bleeding === 'number') {
       columnElements.push(
@@ -68,8 +56,6 @@ export default class DayColumn extends Component {
       columnElements.push(mucusIcon)
     }
 
-    columnElements.push(cycleDayLabel, dateLabel)
-
     if(nfpLineInfo.drawFhmLine) {
       const fhmLine = (<View
         position = 'absolute'
@@ -95,6 +81,23 @@ export default class DayColumn extends Component {
       columnElements.push(...this.drawDotAndLine(y, temperatureExclude, index))
     }
 
+    const cycleDayNumber = getCycleDayNumber(dateString)
+    const shortDate = dateString.split('-').slice(1).join('-')
+    const cycleDayLabel = (
+      <Text style={label.number} y={config.cycleDayNumberRowY}>
+        {cycleDayNumber}
+      </Text>)
+    const dateLabel = (
+      <Text style = {label.date} y={config.dateRowY}>
+        {shortDate}
+      </Text>
+    )
+    columnElements.push(
+      <View position='absolute' bottom={0}>
+        {cycleDayLabel}
+        {dateLabel}
+      </View>
+    )
 
     return React.createElement(
       TouchableOpacity,

components/chart/styles.js

@@ -26,16 +26,14 @@ const styles = {
   column: {
     label: {
       date: {
-        stroke: 'grey',
+        color: 'grey',
-        fontSize: 10,
+        fontSize: 9,
-        fontWeight: '100',
+        fontWeight: '100'
-        color: 'red'
       },
       number: {
-        stroke: '#00b159',
+        color: '#00b159',
         fontSize: 13,
-        marginLeft: 1,
+        textAlign: 'center'
-        marginTop: 10
       }
     },
     rect: {