fix: unclear which year it starts on

i18n/en.pot

@@ -5,24 +5,18 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-04-02T13:38:27.904Z\n"
-"PO-Revision-Date: 2024-04-02T13:38:27.904Z\n"
-
-msgid "Growth Chart"
-msgstr "Growth Chart"
-
-msgid "There was an error fetching the config for the growth chart."
-msgstr "There was an error fetching the config for the growth chart."
-
-msgid "Please check the configuration in Datastore Management and try again."
-msgstr "Please check the configuration in Datastore Management and try again."
+"POT-Creation-Date: 2024-04-23T14:36:23.306Z\n"
+"PO-Revision-Date: 2024-04-23T14:36:23.307Z\n"
 
 msgid "Date"
 msgstr "Date"
 
 msgid "Age"
 msgstr "Age"
 
+msgid "Growth Chart"
+msgstr "Growth Chart"
+
 msgid "Years"
 msgstr "Years"
 
@@ -91,3 +85,9 @@ msgstr "Boy"
 
 msgid "Girl"
 msgstr "Girl"
+
+msgid "There was an error fetching the config for the growth chart."
+msgstr "There was an error fetching the config for the growth chart."
+
+msgid "Please check the configuration in Datastore Management and try again."
+msgstr "Please check the configuration in Datastore Management and try again."

src/components/GrowthChart/GrowthChartBuilder/GrowthChartBuilder.tsx

@@ -66,8 +66,10 @@ export const GrowthChartBuilder = ({
                             const isFirstTick = index === 0;
                             const isLastTick = index === values.length - 1;
 
-                            if (isFirstTick) return '0';
-                            if (isLastTick) return '12';
+                            if (isFirstTick || isLastTick) {
+                                const years = value / 12;
+                                return `${years} ${years === 1 ? i18n.t('Year') : i18n.t('Years')}`;
+                            }
 
                             const modulo = value % 12;
                             return modulo === 0 ? '' : modulo;