diff --git a/frontend/src/histogram/ui/Chart.vue b/frontend/src/histogram/ui/Chart.vue
index 617fa803530b81a1ac1033d262ff21c81af27451..0ee4b23e31159e6a38e163cea68ecfaa86e4ee4b 100644
--- a/frontend/src/histogram/ui/Chart.vue
+++ b/frontend/src/histogram/ui/Chart.vue
@@ -89,10 +89,10 @@ export default {
 
         setChartOptions(visData, tag, chartType) {
             let grid = {
-                left: '15%',
-                top: '15%',
-                right: '10%',
-                bottom: '8%'
+                left: 45,
+                top: 60,
+                right: 40,
+                bottom: 36
             };
             let title = {
                 text: tag,
@@ -185,9 +185,9 @@ export default {
             let ecChart = this.myChart;
             let maxStep = -Infinity;
             let minStep = Infinity;
-            grid.top = '42%';
-            grid.left = '4%';
-            grid.right = '10%';
+            grid.top = 126;
+            grid.left = 16;
+            grid.right = 40;
             chartData.forEach(function (dataItem) {
                 let lineData = [];
                 maxStep = Math.max(dataItem.step, maxStep);
diff --git a/frontend/src/scalars/ui/Chart.vue b/frontend/src/scalars/ui/Chart.vue
index 9eabbdb2a27412b73551c57fca0adcf888726404..6ebf9617288e93c5b3ba36beb3cb4de37ba73316 100644
--- a/frontend/src/scalars/ui/Chart.vue
+++ b/frontend/src/scalars/ui/Chart.vue
@@ -220,19 +220,20 @@ export default {
                 },
                 legend: {
                     data: legendOptions,
-                    top: '13%'
+                    top: 39
                 },
                 grid: {
-                    left: '12%',
-                    top: '25%',
-                    right: '10%',
-                    bottom: '12%'
+                    left: 48,
+                    top: 75,
+                    right: 40,
+                    bottom: 36
                 },
                 xAxis: {
                     type: 'value',
                     axisLabel: {
                         fontSize: '11'
-                    }
+                    },
+                    splitNumber: this.isExpand ? 10 : 5
                 },
                 yAxis: {
                     type: 'value',
@@ -427,19 +428,30 @@ export default {
             let horizontalToxAxisOptions = {
                 step: {
                     xAxis: {
-                        type: 'value'
+                        type: 'value',
+                        axisLabel: {
+                            fontSize: '11'
+                        },
+                        splitNumber: this.isExpand ? 10 : 5
                     },
                     series: stepSeries
                 },
                 relative: {
                     xAxis: {
-                        type: 'value'
+                        type: 'value',
+                        axisLabel: {
+                            fontSize: '11'
+                        },
+                        splitNumber: this.isExpand ? 10 : 5
                     },
                     series: relativeSeries
                 },
                 wall: {
                     xAxis: {
-                        type: 'time'
+                        type: 'time',
+                        axisLabel: {
+                            fontSize: '11'
+                        },
                     },
                     series: wallSeries
                 }
@@ -468,6 +480,12 @@ export default {
                     height: 300
                 });
             }
+
+            this.myChart.setOption({
+                xAxis: {
+                    splitNumber: this.isExpand ? 10 : 5
+                }
+            });
         },
 
         toggleSelectZoom(enable) {