uses cycle day symbol in chart and corresponding color

components/chart/chart.js

@@ -19,6 +19,7 @@ import MucusIcon from '../../assets/mucus'
 import NoteIcon from '../../assets/note'
 import PainIcon from '../../assets/pain'
 import SexIcon from '../../assets/sex'
+import CycleDayIcon from '../../assets/home-circle'
 import nothingChanged from '../../db/db-unchanged'
 
 export default class CycleChart extends Component {
@@ -166,13 +167,16 @@ export default class CycleChart extends Component {
             <View style={[styles.yAxis, {height: this.columnHeight}]}>
               {makeYAxisLabels(this.columnHeight)}
             </View>
-            <View style={[styles.yAxis, {height: this.xAxisHeight}]}>
-              <AppText style = {[
-                styles.column.label.number,
-                styles.yAxisLabels.cycleDayLabel
-              ]}>
-                {labels.cycleDayWithLinebreak}
-              </AppText>
+            <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
+              <Svg
+                width={styles.yAxis.width * 0.7}
+                height={styles.yAxis.width * 0.7}
+                viewBox='325 330 185 185'
+              >
+                <G fill="none" stroke="#1E0B7A" strokeWidth="10">
+                  <CycleDayIcon/>
+                </G>
+              </Svg>
               <AppText style={[
                 styles.column.label.date,
                 styles.yAxisLabels.dateLabel

components/chart/styles.js

@@ -1,5 +1,5 @@
 import config from '../../config'
-import {primaryColor, shadesOfRed} from '../../styles/index'
+import { shadesOfRed, cycleDayColor } from '../../styles/index'
 
 const colorTemperature = '#765285'
 const colorTemperatureLight = '#a67fb5'
@@ -36,7 +36,7 @@ const styles = {
         textAlign: 'center',
       },
       number: {
-        color: primaryColor,
+        color: cycleDayColor,
         fontSize: numberLabelFontSize,
         textAlign: 'center',
       }