From 7ba0c8199335e75ca2a99039b18b677cb26382ba Mon Sep 17 00:00:00 2001
From: JavaZero <71128095+JavaZeroo@users.noreply.github.com>
Date: Tue, 22 Jul 2025 16:15:35 +0800
Subject: [PATCH 1/2] Add axis grace and integer tick labels

---
 src/components/ChartContainer.jsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx
index 4622b9d..a7d7fff 100644
--- a/src/components/ChartContainer.jsx
+++ b/src/components/ChartContainer.jsx
@@ -314,13 +314,20 @@ export default function ChartContainer({
         title: { display: true, text: 'Step' },
         min: xRange.min,
         max: xRange.max,
-        bounds: 'data'
+        bounds: 'data',
+        grace: '2%',
+        ticks: {
+          callback: function (value) {
+            return Math.round(value);
+          }
+        }
       },
       y: {
         type: 'linear',
         display: true,
         title: { display: true, text: 'Value' },
         bounds: 'data',
+        grace: '5%',
         ticks: {
           callback: function (value) {
             return Number(value.toPrecision(2));

From 37196532155dcf50ed936efafd90882fde7c4e0e Mon Sep 17 00:00:00 2001
From: JavaZero <71128095+JavaZeroo@users.noreply.github.com>
Date: Tue, 22 Jul 2025 16:42:25 +0800
Subject: [PATCH 2/2] Adjust chart axis grace

---
 src/components/ChartContainer.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx
index a7d7fff..495c99f 100644
--- a/src/components/ChartContainer.jsx
+++ b/src/components/ChartContainer.jsx
@@ -315,7 +315,6 @@ export default function ChartContainer({
         min: xRange.min,
         max: xRange.max,
         bounds: 'data',
-        grace: '2%',
         ticks: {
           callback: function (value) {
             return Math.round(value);
@@ -327,7 +326,7 @@ export default function ChartContainer({
         display: true,
         title: { display: true, text: 'Value' },
         bounds: 'data',
-        grace: '5%',
+        grace: '20%',
         ticks: {
           callback: function (value) {
             return Number(value.toPrecision(2));