Added axis labels

stockingly-frontend/src/components/BalanceSheet.vue

@@ -90,6 +90,10 @@ const options = computed(() => {
     })),
     axes: [
       {
+        title: {
+          enabled: true,
+          text: 'Company Ticker' 
+        },
         type: 'category',
         position: 'bottom',
         gridStyle: [{
@@ -99,12 +103,18 @@ const options = computed(() => {
         }]
       },
       {
+        enabled: true,
+        title: {
+          enabled: true,
+          text: 'Amount in USD',
+        },
         type: 'number',
         position: 'left',
         label: {
           format: '$~s',
           formatter: (params: AgAxisLabelFormatterParams) =>
             params?.formatter?.(params.value)
+              .replace('y', '')
               .replace('k', 'K')
               .replace('G', 'B') ?? ''
         },

stockingly-frontend/src/components/EmployeesChart.vue

@@ -71,7 +71,11 @@ const options = computed(() => {
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
-        }]
+        }],
+        title: {
+          enabled: true,
+          text: 'Year' 
+        },
       },
       {
         type: 'number',
@@ -80,7 +84,11 @@ const options = computed(() => {
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
-        }]
+        }],
+        title: {
+          enabled: true,
+          text: '# of employees' 
+        },
       },
     ],
     legend: {

stockingly-frontend/src/components/EpsChart.vue

@@ -66,7 +66,11 @@ const options = computed(() => {
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
-        }]
+        }],
+        title: {
+          enabled: true,
+          text: 'Quarter' 
+        },
       },
       {
         type: 'number',
@@ -75,7 +79,11 @@ const options = computed(() => {
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
-        }]
+        }],
+        title: {
+          enabled: true,
+          text: 'Amount in USD' 
+        },
       },
     ],
     legend: {

stockingly-frontend/src/components/StockPrice.vue

@@ -141,6 +141,7 @@ const options = computed(() => {
       stroke: getTickerColor(t),
       tooltip: { renderer: renderer },
       marker: {
+        size: timeToggle.value == '1M' || timeToggle.value == '3M' ? 5 : 1,
         fill: getTickerColor(t),
         stroke: getTickerColor(t)
       }
@@ -164,6 +165,10 @@ const options = computed(() => {
         }, {
           lineDash: [Infinity]
         }],
+        title: {
+          enabled: true,
+          text: 'Closing date' 
+        },
         crossLines: Object.entries(minDates(stockPrice.data ?? []))
           .map(([key, value]: [string, number]) => ({
             type: 'line',
@@ -181,14 +186,19 @@ const options = computed(() => {
           format: '$~s',
           formatter: (params: AgAxisLabelFormatterParams) =>
             params?.formatter?.(params.value)
+              .replace('y', '')
               .replace('k', 'K')
-              .replace('G', 'B') ?? '' + '$'
+              .replace('G', 'B') ?? '' 
         },
         gridStyle: [{
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
         }],
+        title: {
+          enabled: true,
+          text: 'Amount in USD' 
+        },
       },
     ],
     legend: {