diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index a5d8d8f0..ab32ba11 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -43,7 +43,7 @@ limitations under the License. -->
           </template>
         </el-table-column>
         <el-table-column
-          v-for="(metric, index) in config.metrics"
+          v-for="(metric, index) in colMetrics"
           :label="`${metric} ${getUnit(index)}`"
           :key="metric + index"
         >
@@ -73,7 +73,7 @@ limitations under the License. -->
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
@@ -118,6 +118,7 @@ const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
 const searchText = ref<string>("");
+const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
 
 queryEndpoints();
 
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 678256d8..e5dcf3fc 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -43,7 +43,7 @@ limitations under the License. -->
           </template>
         </el-table-column>
         <el-table-column
-          v-for="(metric, index) in config.metrics"
+          v-for="(metric, index) in colMetrics"
           :label="`${metric} ${getUnit(index)}`"
           :key="metric + index"
         >
@@ -103,7 +103,7 @@ limitations under the License. -->
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
@@ -149,6 +149,7 @@ const chartLoading = ref<boolean>(false);
 const instances = ref<Instance[]>([]); // current instances
 const pageSize = 10;
 const searchText = ref<string>("");
+const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
 
 queryInstance();
 async function queryInstance() {
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 09284280..c6c82d83 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -55,7 +55,7 @@ limitations under the License. -->
           </template>
         </el-table-column>
         <el-table-column
-          v-for="(metric, index) in config.metrics"
+          v-for="(metric, index) in colMetrics"
           :label="`${metric} ${getUnit(index)}`"
           :key="metric + index"
         >
@@ -96,7 +96,7 @@ limitations under the License. -->
   </div>
 </template>
 <script setup lang="ts">
-import { watch, ref } from "vue";
+import { watch, ref, computed } from "vue";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import { ServiceListConfig } from "@/types/dashboard";
@@ -138,6 +138,9 @@ const services = ref<Service[]>([]);
 const searchText = ref<string>("");
 const groups = ref<any>({});
 const sortServices = ref<(Service & { merge: boolean })[]>([]);
+const colMetrics = computed(() =>
+  props.config.metrics.filter((d: string) => d)
+);
 
 queryServices();