diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 1717c426792d585e24ab92b6a38205ff3a1e4486..a1ec1584ac59f9899eda4de92a05f87b20b28b0c 100644
--- a/components/chart/day-column.js
+++ b/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,
diff --git a/components/chart/styles.js b/components/chart/styles.js
index b85d115c88771fb9b60b9624982bef7b7b311666..c018eb11b9ad76727979914072bb8365d7d20ea6 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -26,16 +26,14 @@ const styles = {
   column: {
     label: {
       date: {
-        stroke: 'grey',
-        fontSize: 10,
-        fontWeight: '100',
-        color: 'red'
+        color: 'grey',
+        fontSize: 9,
+        fontWeight: '100'
       },
       number: {
-        stroke: '#00b159',
+        color: '#00b159',
         fontSize: 13,
-        marginLeft: 1,
-        marginTop: 10
+        textAlign: 'center'
       }
     },
     rect: {