diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue
index 15cc3432..857b26ae 100644
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -56,6 +56,10 @@ export default {
       this.chart.setOption(
         {
           backgroundColor: '#08263a',
+          grid: {
+            left: '5%',
+            right: '5%'
+          },
           xAxis: [{
             show: false,
             data: xAxisData
diff --git a/src/components/Charts/lineMarker.vue b/src/components/Charts/lineMarker.vue
index 9f56e613..5d41b022 100644
--- a/src/components/Charts/lineMarker.vue
+++ b/src/components/Charts/lineMarker.vue
@@ -80,8 +80,8 @@ export default {
         },
         grid: {
           top: 100,
-          left: '3%',
-          right: '4%',
+          left: '2%',
+          right: '2%',
           bottom: '2%',
           containLabel: true
         },
diff --git a/src/components/Charts/mixChart.vue b/src/components/Charts/mixChart.vue
index 40aee7a0..a8e271ca 100644
--- a/src/components/Charts/mixChart.vue
+++ b/src/components/Charts/mixChart.vue
@@ -75,8 +75,10 @@ export default {
           }
         },
         grid: {
+          left: '5%',
+          right: '5%',
           borderWidth: 0,
-          top: 110,
+          top: 150,
           bottom: 95,
           textStyle: {
             color: '#fff'
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
index 98087ab0..3ea21397 100644
--- a/src/views/charts/keyboard.vue
+++ b/src/views/charts/keyboard.vue
@@ -16,9 +16,8 @@ export default {
 <style scoped>
 .chart-container{
   position: relative;
-  padding: 20px;
   width: 100%;
-  height: 85vh;
+  height: calc(100vh - 84px);
 }
 </style>
 
diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue
index da0b5bba..2034d4c7 100644
--- a/src/views/charts/line.vue
+++ b/src/views/charts/line.vue
@@ -16,9 +16,8 @@ export default {
 <style scoped>
 .chart-container{
   position: relative;
-  padding:20px;
   width: 100%;
-  height:85vh;
+  height: calc(100vh - 84px);
 }
 </style>
 
diff --git a/src/views/charts/mixChart.vue b/src/views/charts/mixChart.vue
index 568bae7b..7ccc7fa0 100644
--- a/src/views/charts/mixChart.vue
+++ b/src/views/charts/mixChart.vue
@@ -16,9 +16,8 @@ export default {
 <style scoped>
 .chart-container{
   position: relative;
-  padding: 20px;
   width: 100%;
-  height:85vh;
+  height: calc(100vh - 84px);
 }
 </style>