Extract styles and move vertical line a bit so it's completely visible

components/chart/chart.js

@@ -72,14 +72,15 @@ export default class CycleChart extends Component {
         <Rect {...styles.column.rect} />
         {nfpLineInfo.drawFhmLine ?
           <Line
-            x1="0"
+            x1={0 + styles.nfpLine.strokeWidth / 2}
             y1="20"
-            x2="0"
+            x2={0 + styles.nfpLine.strokeWidth / 2}
             y2={config.chartHeight - 20}
-            stroke="orange"
+            {...styles.nfpLine}
-            strokeWidth="5"
           /> : null}
+
         {this.placeHorizontalGrid()}
+
         <Text {...label.number} y={config.cycleDayNumberRowY}>{cycleDayNumber}</Text>
         <Text {...label.date} y={config.dateRowY}>{dateLabel}</Text>
 
@@ -97,8 +98,7 @@ export default class CycleChart extends Component {
             y1={nfpLineInfo.drawLtlAt}
             x2={config.columnWidth}
             y2={nfpLineInfo.drawLtlAt}
-            stroke="orange"
+            {...styles.nfpLine}
-            strokeWidth="3"
           /> : null}
 
         {y ? this.drawDotAndLines(y, cycleDay.temperature.exclude, index) : null}

components/chart/styles.js

@@ -62,6 +62,10 @@ const styles = {
   horizontalGrid: {
     stroke: 'lightgrey',
     strokeWidth: 1
+  },
+  nfpLine: {
+    stroke: '#00b159',
+    strokeWidth: 3
   }
 }