ui fix

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",
           },