try doing the math

components/chart/config.js

@@ -5,7 +5,7 @@ const config = {
     low: 35,
     high: 40
   },
-  xAxisRangeInDays: 50
+  xAxisRangeInDays: 1000
 }
 
 const margin = 3

components/chart/day-column.js

@@ -9,7 +9,7 @@ import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
 import setUpFertilityStatusFunc from './nfp-lines'
 import { horizontalGrid } from './y-axis'
-import slowlog from 'react-native-slowlog'
+//import slowlog from 'react-native-slowlog'
 
 const getCycleDayNumber = cycleModule().getCycleDayNumber
 const label = styles.column.label
@@ -18,7 +18,7 @@ const getFhmAndLtlInfo = setUpFertilityStatusFunc()
 export default class DayColumn extends Component {
   constructor(props) {
     super(props)
-    slowlog(this, /.*/, {threshold: 30})
+    //slowlog(this, /.*/, {threshold: 30})
   }
   makeDayColumn(data, index) {
     const {
@@ -68,8 +68,6 @@ export default class DayColumn extends Component {
     //     /> : null}
     // />)
 
-    // onPress: () => this.passDateToDayView(dateString),
-
     //     <Path {...styles.bleedingIcon}
     //       d="M15 3
     //         Q16.5 6.8 25 18
@@ -87,7 +85,7 @@ export default class DayColumn extends Component {
     //     /> : null}
 
     if (y) {
-      columnElements.push(this.drawDotAndLines(y, temperatureExclude, index))
+      columnElements.push(...this.drawDotAndLine(y, temperatureExclude, index))
     }
     //   {cycleDay && cycleDay.mucus ?
     //     <Circle
@@ -114,55 +112,59 @@ export default class DayColumn extends Component {
     )
   }
 
-  drawDotAndLines(currY, exclude) {
+  drawDotAndLine(currY, exclude) {
-    /*       <View
-        width='150%'
-        borderStyle = 'solid'
-        borderColor = 'red'
-        borderWidth = {1}
-        position = 'absolute'
-        top={200}
-        style={{
-          transform: [{rotateZ: '30deg'}]
-        }}
-      />
-    ) */
     let lineToRight
     let lineToLeft
 
-    /* function makeLine(otherColY, x, excludeLine) {
+    function makeLine(leftY, rightY, leftX, excludeLine) {
-      const middleY = ((otherColY - currY) / 2) + currY
+      const heightDiff = leftY - rightY
-      const target = [x, middleY]
+      const angle = Math.atan2(config.columnWidth, heightDiff)
       const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
+      // hypotenuse
+      const h = (config.columnWidth / 2) / Math.cos(angle)
+      const neededDiff = Math.sin(Math.PI - (angle + Math.PI / 2)) * (h / 2)
+      const projectedX = leftX - ((h / 2) - neededDiff)
+      console.log(leftX)
+      console.log(projectedX)
 
-      return <Line
+      return (<View
-        x1={config.columnMiddle}
+        width={h}
-        y1={currY}
+        position = 'absolute'
-        x2={target[0]}
+        top={(leftY + rightY) / 2}
-        y2={target[1]}
+        left={projectedX}
+        style={{
+          // the rotation by default rotates from the middle of the line,
+          // but we want the transform origin to be at its beginning
+          // react native doesn't have transformOrigin, so we do this manually
+          transform: [
+            {rotateZ: `${angle}rad`}
+          ],
+        }}
         {...lineStyle}
-      />
+      />)
-    } */
-
- /*    if (this.props.rightY) {
-      const excludedLine = this.props.rightTemperatureExclude || exclude
-      lineToRight = makeLine(this.props.rightY, config.columnWidth, excludedLine)
     }
+
     if (this.props.leftY) {
+      const middleY = ((this.props.leftY - currY) / 2) + currY
       const excludedLine = this.props.leftTemperatureExclude || exclude
-      lineToLeft = makeLine(this.props.leftY, 0, excludedLine)
+      lineToLeft = makeLine(middleY, currY, 0, excludedLine)
-    } */
+    }
+    if (this.props.rightY) {
+      const middleY = ((currY - this.props.rightY) / 2) + this.props.rightY
+      const excludedLine = this.props.rightTemperatureExclude || exclude
+      lineToRight = makeLine(currY, middleY, config.columnMiddle, excludedLine)
+    }
 
     const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
-/*     return (<G>
+    const dot = (
-      {lineToRight}
+      <View
-      {lineToLeft}
+        position='absolute'
-      <Circle
+        top={currY - (dotStyle.height / 2)}
-        cx={config.columnMiddle}
+        left={config.columnMiddle - (dotStyle.width / 2)}
-        cy={currY}
+        style={dotStyle}
-        {...dotStyle}
       />
-    </G>) */
+    )
+    return [lineToLeft, lineToRight, dot]
   }
 
   passDateToDayView(dateString) {