diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 289b2749d..f0a20ded3 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -49,6 +49,7 @@ declare global {
   const defineComponent: typeof import('vue')['defineComponent']
   const defineStore: typeof import('pinia')['defineStore']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const echartsGridDefault: typeof import('./utils/charts/chartZoom')['echartsGridDefault']
   const effectScope: typeof import('vue')['effectScope']
   const exportForTesting: typeof import('./utils/formatters/timeformat')['exportForTesting']
   const extendRef: typeof import('@vueuse/core')['extendRef']
@@ -436,6 +437,7 @@ declare module 'vue' {
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
+    readonly echartsGridDefault: UnwrapRef<typeof import('./utils/charts/chartZoom')['echartsGridDefault']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly exportForTesting: UnwrapRef<typeof import('./utils/formatters/timeformat')['exportForTesting']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
diff --git a/src/components/charts/CumProfitChart.vue b/src/components/charts/CumProfitChart.vue
index a09178888..a3d225930 100644
--- a/src/components/charts/CumProfitChart.vue
+++ b/src/components/charts/CumProfitChart.vue
@@ -242,9 +242,7 @@ const cumProfitChartOptions: ComputedRefWithControl<EChartsOption> = computedWit
         },
       ],
       grid: {
-        left: '55',
-        right: '20',
-        bottom: 80,
+        ...echartsGridDefault,
       },
       dataZoom: [
         {
diff --git a/src/components/charts/MarketChangeChart.vue b/src/components/charts/MarketChangeChart.vue
index c8593a354..d2b4ae236 100644
--- a/src/components/charts/MarketChangeChart.vue
+++ b/src/components/charts/MarketChangeChart.vue
@@ -77,6 +77,9 @@ const dailyChartOptions: ComputedRef<EChartsOption> = computed(() => {
         },
       },
     },
+    grid: {
+      ...echartsGridDefault,
+    },
     legend: {
       data: [CHART_MARKET_CHANGE],
       right: '5%',
diff --git a/src/components/charts/ProfitDistributionChart.vue b/src/components/charts/ProfitDistributionChart.vue
index 07582d47b..f04491a52 100644
--- a/src/components/charts/ProfitDistributionChart.vue
+++ b/src/components/charts/ProfitDistributionChart.vue
@@ -95,9 +95,10 @@ const chartOptions = computed((): EChartsOption => {
         position: 'left',
       },
     ],
-    // grid: {
-    // bottom: 80,
-    // },
+    grid: {
+      ...echartsGridDefault,
+      bottom: 50,
+    },
 
     series: [
       {
diff --git a/src/components/charts/TradesLogChart.vue b/src/components/charts/TradesLogChart.vue
index 7a07225f6..77667f96d 100644
--- a/src/components/charts/TradesLogChart.vue
+++ b/src/components/charts/TradesLogChart.vue
@@ -111,8 +111,8 @@ const chartOptions = computed((): EChartsOption => {
       },
     ],
     grid: {
-      right: 50,
-      bottom: 80,
+      ...echartsGridDefault,
+      left: 80,
     },
     dataZoom: [
       {
diff --git a/src/utils/charts/chartZoom.ts b/src/utils/charts/chartZoom.ts
index bdcbf0760..ebb605c75 100644
--- a/src/utils/charts/chartZoom.ts
+++ b/src/utils/charts/chartZoom.ts
@@ -8,3 +8,9 @@ export const dataZoomPartial = {
   handleIcon,
   handleSize: '80%',
 };
+
+export const echartsGridDefault = {
+  left: '55',
+  right: '30',
+  bottom: 80,
+};