From 9ae13bd5eb67071c1f620681a78ed3d5fe601726 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 6 Jan 2025 19:59:53 +0100
Subject: [PATCH] ui fix

---
 .../stocks/[tickerID]/metrics/[slug]/+page.svelte    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index 7c84f8aa..6ad1b9b8 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -60,8 +60,8 @@
     const options = {
       animation: false,
       grid: {
-        left: "0%",
-        right: "2%",
+        left: "5%",
+        right: "5%",
         bottom: "2%",
         top: "10%",
         containLabel: true,
@@ -71,15 +71,16 @@
         boundaryGap: false,
         data: xData,
         axisLabel: {
-          color: "#fff",
           formatter: function (value) {
-            // Assuming dates are in the format 'yyyy-mm-dd'
-            // Extract the month and day from the date string and convert the month to its abbreviated name
             const dateParts = value.split("-");
             const year = dateParts[0].substring(2); // Extracting the last two digits of the year
             const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
             return `${monthNames[monthIndex]} '${year} `;
           },
+          color: "#fff",
+          interval: 0, // Show all labels
+          rotate: 45, // Rotate labels for better readability
+          fontSize: 12, // Adjust font size if needed
         },
       },
       yAxis: [
@@ -101,6 +102,7 @@
           type: "bar",
           smooth: true,
           symbol: "none",
+          barWidth: "60%",
           itemStyle: {
             color: "#fff",
           },