diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index c75f469ce..33675d057 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -178,7 +178,16 @@ const cn = {
           alertRule:'告警规则',
           level:'级别',
           state:'状态'
-        }
+        },
+        valMapping:{
+          name:'Value mapping',
+          from:'From',
+          to:'To',
+          text:'Text',
+          value:'Value',
+          range:'Range',
+        },
+        legendValue:'Legend option'
       },
       chartTableColumn: {
         metric: "指标",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 044618dd8..a947671a0 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -192,7 +192,8 @@ const en = {
           text:'Text',
           value:'Value',
           range:'Range',
-        }
+        },
+        legendValue:'Legend option'
       },
       chartTableColumn:{
         metric:'Metric', //'指标'
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 0d25de3b7..ac08d518e 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -245,6 +245,27 @@
         </template>
 
         <!--value mapping end-->
+        <template v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
+          <div  class="right-box-sub-title" >
+            <span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
+          </div>
+          <div class="line-100" style="margin-bottom: 20px;" ></div>
+          <div style="display: flex;">
+            <span style="margin-left: 50px;"></span>
+            <template v-for="item in sortedOptionKeys">
+              <div style="flex: 1">
+                <span style="margin-right: 10px;">{{item.label}}</span>
+                <el-switch
+                  v-model="editChart.param.legendValue[item.key]"
+                  active-value="on"
+                  inactive-value="off"
+                  active-color="#ee9d3f"
+                  @change="">
+                </el-switch>
+              </div>
+            </template>
+          </div>
+        </template>
 
       </el-form>
     </el-scrollbar>
@@ -369,6 +390,7 @@
         },
         heightSuggestions:['300','400','500','600'],
         unitOptions:chartDataFormat.unitOptions(),
+        sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Current'},{key:'total',label:'Total'}]
       }
     },
     components:{
@@ -1005,6 +1027,7 @@
         param.url='';
         param.threshold='';
         param.valueMapping={type:'text',mapping:[{value:'',text:''}]};
+        param.legendValue={min:'off',max:'off',avg:'off',last:'off',total:'off'}
         this.$set(this.editChart, "param", param);
         this.elements = [1];
         this.elementTarget = [];