diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 59e543683..51657895c 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1466,7 +1466,7 @@ li{
 }
 .table-chart-dialog .el-dialog {
   height: 80%;
-  margin-top: 5% !important;
+  margin-top: 1vh !important;
 }
 .table-chart-dialog .el-dialog .el-dialog__body {
   height: calc(100% - 82px);
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 986ea83c0..1486df1ec 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -11,6 +11,15 @@
     .visible{
       visibility: visible;
     }
+    .chart-title {
+      display: flex;
+    }
+    .chart-title-text{
+      max-width:calc(100% - 175px);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
 </style>
 <style>
   .char-url-preview html{
@@ -40,8 +49,8 @@
               <span class="panel-info-corner-inner"></span>
           </span>
       </el-popover>
-      <div slot="title">
-        <span class="nz-dialog-title">{{chart.title}}</span>
+      <div slot="title" class="chart-title">
+        <span class="nz-dialog-title chart-title-text">{{chart.title}}</span>
         <div class="float-right panel-calendar dialog-tool"  v-if="chart.type!=='url'">
 
           <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss
index aa356148a..41559cf66 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/nezha-fronted/src/components/charts/line-chart-block.scss
@@ -41,7 +41,8 @@
 .legend-item{
   text-overflow:ellipsis;
   white-space:nowrap;
-  width:100%;
+  /*width:100%;*/
+  margin-right:10px;
   overflow-x:hidden;
   cursor:pointer;
   display:inline-block;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 5f6812f0a..d012d08be 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -81,7 +81,6 @@
     <div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
       <div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
         <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
-        <br/><!--bgColorList[index]-->
       </div>
     </div>
     <!--
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index fc2fa9fe4..3535d77ea 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -922,7 +922,7 @@
         this.chart.height=item;
       },
       unitSelected:function(value){
-        this.chart.unit=value[value.length-1];
+        //this.chart.unit=value[value.length-1];
       },
       chartTypeChange(){
         let chartType = this.chart.type;