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