diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 1c981decc9..f14fe50959 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -916,6 +916,7 @@ export default {
     margin_model_absolute: 'Absolute',
     margin_model_relative: 'Relative',
     margin_placeholder: 'Please enter a number from 0-100',
+    margin_absolute_placeholder: 'Please enter a number from 0-40',
     rich_text_view_result_tips: 'The rich text view selects only the first result',
     rich_text_view: 'Rich Text View',
     view_reset: 'View Reset',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 65fac546e5..212c7e7b65 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -916,6 +916,7 @@ export default {
     margin_model_absolute: '絕對',
     margin_model_relative: '相對',
     margin_placeholder: '請輸入0-100數字',
+    margin_absolute_placeholder: '請輸入0-40數字',
     rich_text_view_result_tips: '富文本只选取第一条结果',
     rich_text_view: '富文本视图',
     view_reset: '視圖重置',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index d264fe12e6..c1ba56582b 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -915,6 +915,7 @@ export default {
     margin_model_absolute: '绝对',
     margin_model_relative: '相对',
     margin_placeholder: '请输入0-100数字',
+    margin_absolute_placeholder: '请输入0-40数字',
     rich_text_view_result_tips: '富文本只选取第一条结果',
     rich_text_view: '富文本视图',
     view_reset: '视图重置',
diff --git a/frontend/src/views/chart/components/component-style/MarginSelector.vue b/frontend/src/views/chart/components/component-style/MarginSelector.vue
index fc7d8ee65b..41ebf2aa2a 100644
--- a/frontend/src/views/chart/components/component-style/MarginSelector.vue
+++ b/frontend/src/views/chart/components/component-style/MarginSelector.vue
@@ -3,7 +3,7 @@
     <el-col>
       <el-form ref="marginForm" :model="marginForm" label-width="80px" size="mini" :rules="rules">
         <el-form-item v-show="showProperty('marginModel')" :label="$t('chart.margin_model')" class="form-item">
-          <el-radio-group v-model="marginForm.marginModel" size="mini" @change="changeMarginStyle('marginModel')">
+          <el-radio-group v-model="marginForm.marginModel" size="mini" @change="changeMarginStyle(marginForm.marginModel, 'marginModel')">
             <el-radio-button label="auto">{{ $t('chart.margin_model_auto') }}</el-radio-button>
             <el-radio-button label="absolute">{{ $t('chart.margin_model_absolute') }}</el-radio-button>
             <el-radio-button label="relative">{{ $t('chart.margin_model_relative') }}</el-radio-button>
@@ -11,25 +11,25 @@
         </el-form-item>
         <div v-show="showProperty('marginModel') && marginForm.marginModel !== 'auto'">
           <el-form-item v-show="showProperty('marginTop')" :label="$t('chart.text_pos_top')" class="form-item" prop="marginTop">
-            <el-input v-model="marginForm.marginTop" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
+            <el-input v-model="marginForm.marginTop" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
           <el-form-item v-show="showProperty('marginBottom')" :label="$t('chart.text_pos_bottom')" class="form-item" prop="marginBottom">
-            <el-input v-model="marginForm.marginBottom" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
+            <el-input v-model="marginForm.marginBottom" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
           <el-form-item v-show="showProperty('marginLeft')" :label="$t('chart.text_pos_left')" class="form-item" prop="marginLeft">
-            <el-input v-model="marginForm.marginLeft" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
+            <el-input v-model="marginForm.marginLeft" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
 
           <el-form-item v-show="showProperty('marginRight')" :label="$t('chart.text_pos_right')" class="form-item" prop="marginRight">
-            <el-input v-model="marginForm.marginRight" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
+            <el-input v-model="marginForm.marginRight" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
               <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
             </el-input>
           </el-form-item>
@@ -84,6 +84,15 @@ export default {
   computed: {
     unitSuffix() {
       return getMarginUnit(this.marginForm)
+    },
+    placeholder() {
+      if (this.marginForm.marginModel === 'absolute') {
+        return this.$t('chart.margin_placeholder')
+      } else if (this.marginForm.marginModel === 'relative') {
+        return this.$t('chart.margin_absolute_placeholder')
+      } else {
+        return null
+      }
     }
   },
   watch: {
@@ -113,6 +122,20 @@ export default {
     },
 
     changeMarginStyle(value, modifyName) {
+      if (modifyName === 'marginModel') {
+        if (value === 'absolute') {
+          this.marginForm.marginTop = JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)).marginTop
+          this.marginForm.marginBottom = JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)).marginBottom
+          this.marginForm.marginLeft = JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)).marginLeft
+          this.marginForm.marginRight = JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)).marginRight
+        }
+        if (value === 'relative') {
+          this.marginForm.marginTop = 15
+          this.marginForm.marginBottom = 15
+          this.marginForm.marginLeft = 5
+          this.marginForm.marginRight = 5
+        }
+      }
       this.marginForm['modifyName'] = modifyName
       this.$emit('onMarginChange', this.marginForm)
     },
@@ -124,9 +147,14 @@ export default {
         callBack()
         return
       }
-      if (value < 0 || value > 100) {
+      if (this.marginForm.marginModel === 'absolute' && (value < 0 || value > 100)) {
         callBack(new Error(this.$t('chart.margin_placeholder')))
         this.marginForm[rule.field] = 0
+      } else if (this.marginForm.marginModel === 'relative' && (value < 0 || value > 40)) {
+        callBack(new Error(this.$t('chart.margin_absolute_placeholder')))
+        this.marginForm[rule.field] = 0
+      } else {
+        callBack()
       }
     }
   }