diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index a4a16f3188..a6a626d56e 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -668,7 +668,8 @@ export default {
     only_one_quota: 'Only support 1 quota',
     only_one_result: 'Only show first result',
     dimension_show: 'Dimension Show',
-    quota_show: 'Quota Show'
+    quota_show: 'Quota Show',
+    title_limit: 'Title cannot be greater than 50 characters'
   },
   dataset: {
     datalist: 'Data Set',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 8fff6d763c..b4710c7851 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -668,7 +668,8 @@ export default {
     only_one_quota: '僅支持1個指標',
     only_one_result: '僅顯示第1個計算結果',
     dimension_show: '維度顯示',
-    quota_show: '指標顯示'
+    quota_show: '指標顯示',
+    title_limit: '標題不能大於50個字符'
   },
   dataset: {
     datalist: '數據集',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 836d872b33..84375d1c94 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -670,7 +670,8 @@ export default {
     only_one_quota: '仅支持1个指标',
     only_one_result: '仅显示第1个计算结果',
     dimension_show: '维度显示',
-    quota_show: '指标显示'
+    quota_show: '指标显示',
+    title_limit: '标题不能大于50个字符'
   },
   dataset: {
     datalist: '数据集',
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 65f18563cc..b66928c81f 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -89,7 +89,7 @@
             </el-form-item>
           </el-form>
         </div>
-        <div style="height: 25%;overflow:auto" class="padding-lr">
+        <div style="height: 25vh;overflow:auto" class="padding-lr">
           <span>{{ $t('chart.chart_type') }}</span>
           <el-row>
             <div class="chart-type">
@@ -138,7 +138,7 @@
             </span>
           </span>
         </el-row>
-        <div style="height: 40%;overflow:hidden;border-top: 1px solid #e6e6e6">
+        <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
           <el-row class="padding-lr">
             <span>{{ $t('chart.style_priority') }}</span>
             <el-row>
@@ -407,6 +407,10 @@ export default {
       view.id = this.view.id
       view.sceneId = this.view.sceneId
       view.name = this.view.name ? this.view.name : this.table.name
+      if (view.title.length > 50) {
+        this.$warning(this.$t('chart.title_limit'))
+        return
+      }
       view.tableId = this.view.tableId
       view.xaxis.forEach(function(ele) {
         // if (!ele.summary || ele.summary === '') {
@@ -459,6 +463,10 @@ export default {
       })
     },
     closeEdit() {
+      if (this.view.title.length > 50) {
+        this.$warning(this.$t('chart.title_limit'))
+        return
+      }
       html2canvas(this.$refs.imageWrapper).then(canvas => {
         const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
         if (snapshot !== '') {
@@ -874,6 +882,10 @@ export default {
     padding-left: 0;
   }
 
+  .attr-style{
+    height: calc(100vh - 56px - 25vh - 40px - 62px - 10px);
+  }
+
   .attr-selector{
     width:100%;
     height: 32px;