diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 98b7cb4c..234f8b9a 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -23,7 +23,7 @@ limitations under the License. -->
     }"
   >
     {{ singleVal.toFixed(2) }}
-    <span v-show="config.showUnit">
+    <span class="unit" v-show="config.showUnit">
       {{ decodeURIComponent(unit) }}
     </span>
   </div>
@@ -71,4 +71,9 @@ const unit = computed(
   height: 100%;
   color: #666;
 }
+
+.unit {
+  display: inline-block;
+  margin-left: 2px;
+}
 </style>
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 9bc86313..5ab1b95f 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -42,7 +42,7 @@ limitations under the License. -->
             </span>
           </template>
         </el-table-column>
-        <MetricGraph
+        <ColumnGraph
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
@@ -64,7 +64,7 @@ import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
-import MetricGraph from "./components/MetricGraph.vue";
+import ColumnGraph from "./components/ColumnGraph.vue";
 
 /*global defineProps */
 const props = defineProps({
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 8a572eb2..794b8804 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -42,7 +42,7 @@ limitations under the License. -->
             </span>
           </template>
         </el-table-column>
-        <MetricGraph
+        <ColumnGraph
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
@@ -95,7 +95,7 @@ import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
-import MetricGraph from "./components/MetricGraph.vue";
+import ColumnGraph from "./components/ColumnGraph.vue";
 
 /*global defineProps */
 const props = defineProps({
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 6fa5634d..c0b393fa 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -54,7 +54,7 @@ limitations under the License. -->
             </span>
           </template>
         </el-table-column>
-        <MetricGraph
+        <ColumnGraph
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
           :config="config"
@@ -87,7 +87,7 @@ import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
 import { MetricConfigOpt } from "@/types/dashboard";
-import MetricGraph from "./components/MetricGraph.vue";
+import ColumnGraph from "./components/ColumnGraph.vue";
 
 /*global defineProps */
 const props = defineProps({
diff --git a/src/views/dashboard/graphs/components/MetricGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue
similarity index 100%
rename from src/views/dashboard/graphs/components/MetricGraph.vue
rename to src/views/dashboard/graphs/components/ColumnGraph.vue