diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index 174d6de4..280bac4f 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -235,12 +235,10 @@ limitations under the License. -->
   .no-data {
     font-size: $font-size-smaller;
     height: 100%;
-    box-sizing: border-box;
-    display: -webkit-box;
-    -webkit-box-orient: horizontal;
-    -webkit-box-pack: center;
-    -webkit-box-align: center;
-    color: #666;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    color: var(--text-color-placeholder);
   }
 
   .chart {
diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue
index baaf2190..df563ac5 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="chart-table">
+  <div class="chart-table" v-if="dataKeys.length">
     <div class="row header flex-h">
       <div
         v-for="key in dataKeys[0]"
@@ -41,6 +41,7 @@ limitations under the License. -->
       </div>
     </div>
   </div>
+  <div class="no-data" v-else>No Data</div>
 </template>
 <script lang="ts" setup>
   import { computed } from "vue";
@@ -131,4 +132,13 @@ limitations under the License. -->
       width: 50%;
     }
   }
+
+  .no-data {
+    font-size: $font-size-smaller;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    color: var(--text-color-placeholder);
+  }
 </style>
diff --git a/src/views/dashboard/related/topology/pod/InstanceMap.vue b/src/views/dashboard/related/topology/pod/InstanceMap.vue
index 9e389d86..a192745b 100644
--- a/src/views/dashboard/related/topology/pod/InstanceMap.vue
+++ b/src/views/dashboard/related/topology/pod/InstanceMap.vue
@@ -125,11 +125,13 @@ limitations under the License. -->
     const html = exprssions.map((m: string, index: number) => {
       const metric =
         topologyStore.hierarchyInstanceNodeMetrics[data.layer || ""][m].values.find(
-          (val: { id: string; value: unknown }) => val.id === data.id,
+          (val: { id: string; value: string }) => val.id === data.id,
         ) || {};
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
 
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
+        opt.unit || ""
+      }</div>`;
     });
     const tipHtml = [
       `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
diff --git a/src/views/dashboard/related/topology/service/HierarchyMap.vue b/src/views/dashboard/related/topology/service/HierarchyMap.vue
index 6eb8c33d..0032832d 100644
--- a/src/views/dashboard/related/topology/service/HierarchyMap.vue
+++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue
@@ -133,10 +133,12 @@ limitations under the License. -->
     const html = exprssions.map((m: string, index: number) => {
       const metric =
         topologyStore.hierarchyNodeMetrics[data.layer || ""][m].values.find(
-          (val: { id: string; value: unknown }) => val.id === data.id,
+          (val: { id: string; value: string }) => val.id === data.id,
         ) || {};
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${opt.unit || ""}</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
+        opt.unit || ""
+      }</div>`;
     });
     const tipHtml = [
       `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
diff --git a/src/views/dashboard/related/topology/service/ServiceMap.vue b/src/views/dashboard/related/topology/service/ServiceMap.vue
index 72547435..eba245d6 100644
--- a/src/views/dashboard/related/topology/service/ServiceMap.vue
+++ b/src/views/dashboard/related/topology/service/ServiceMap.vue
@@ -314,7 +314,7 @@ limitations under the License. -->
     const html = nodeMetrics.map((m, index) => {
       const metric =
         (topologyStore.nodeMetricValue[m] &&
-          topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id)) ||
+          topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: string }) => val.id === data.id)) ||
         {};
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
       return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
@@ -344,7 +344,7 @@ limitations under the License. -->
       );
       if (metric) {
         const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
+        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
           opt.unit || ""
         }</div>`;
       }
@@ -355,7 +355,7 @@ limitations under the License. -->
         (val: { id: string; value: unknown }) => val.id === data.id,
       );
       if (metric) {
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${
+        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
           opt.unit || ""
         }</div>`;
       }