removes 0.2 units as this introduces buggy behaviour in ticks, changes line styles

components/chart/day-column.js

@@ -82,20 +82,19 @@ export default class DayColumn extends Component {
 
     // we merge the colors here instead of from the stylesheet because of a RN
     // bug that doesn't apply borderLeftColor otherwise
-    const customStyle = {
+    const potentialCustomStyle = {
       height: columnHeight,
       borderLeftColor: 'grey',
-      borderRightColor: 'grey'
     }
 
     if (drawFhmLine) {
-      customStyle.borderLeftColor = styles.nfpLine.borderColor
-      customStyle.borderLeftWidth = 3
+      potentialCustomStyle.borderLeftColor = styles.nfpLine.borderColor
+      potentialCustomStyle.borderLeftWidth = 3
     }
     const column = React.createElement(
       TouchableOpacity,
       {
-        style: [styles.column.rect, customStyle],
+        style: [styles.column.rect, potentialCustomStyle],
         key: this.props.index.toString(),
         onPress: () => {
           this.passDateToDayView(dateString)

components/chart/styles.js

@@ -46,7 +46,7 @@ const styles = {
     rect: {
       width: config.columnWidth,
       borderStyle: 'solid',
-      borderRightWidth: 0.25,
+      borderLeftWidth: 0.5,
     }
   },
   bleedingIcon: {
@@ -69,7 +69,7 @@ const styles = {
     '#feb47b'
   ],
   yAxis: {
-    width: config.columnWidth,
+    width: 27,//config.columnWidth,
     borderRightWidth: 0.5,
     borderColor: 'lightgrey',
     borderStyle: 'solid'
@@ -84,7 +84,7 @@ const styles = {
   horizontalGrid: {
     position:'absolute',
     borderColor: 'lightgrey',
-    borderTopWidth: 0.25,
+    borderWidth: 0.5,
     width: '100%',
     borderStyle: 'solid',
     left: config.columnWidth

components/chart/y-axis.js

@@ -15,8 +15,15 @@ export function makeYAxisLabels(columnHeight) {
     // to reliably place the label vertically centered to the grid
     const tick = scaleMax - i * units
     const tickLabel = tick * 10 % 10 ? tick.toString() : tick.toString() + '.0'
-    const showTick =  (tick * 10 % 2) ? false : true
-    const tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold'}
+    let showTick
+    let tickBold
+    if (units === 0.1) {
+      showTick =  (tick * 10 % 2) ? false : true
+      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold'}
+    } else {
+      showTick =  (tick * 10 % 5) ? false : true
+      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold'}
+    }
     return (
       <Text
         style={[style, {top: y - 8}, tickBold]}