diff --git a/src/graphql/fragments/selector.ts b/src/graphql/fragments/selector.ts
index 285ab3d6..9c9e46d6 100644
--- a/src/graphql/fragments/selector.ts
+++ b/src/graphql/fragments/selector.ts
@@ -24,6 +24,7 @@ export const Services = {
     group
     layers
     normal
+    shortName
   }
   `,
 };
diff --git a/src/types/selector.d.ts b/src/types/selector.d.ts
index f1b4a3f4..cf8b07d5 100644
--- a/src/types/selector.d.ts
+++ b/src/types/selector.d.ts
@@ -22,6 +22,7 @@ export type Service = {
   normal?: boolean;
   group?: string;
   merge?: string;
+  shortName?: string;
 };
 
 export type Instance = {
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 5624f11b..1cf8f641 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -40,7 +40,7 @@ limitations under the License. -->
         <el-table-column fixed label="Service Names" min-width="220">
           <template #default="scope">
             <span class="link" :style="{ fontSize: `${config.fontSize}px` }" @click="clickService(scope)">
-              {{ scope.row.label }}
+              {{ scope.row.shortName }}
             </span>
           </template>
         </el-table-column>
@@ -208,6 +208,7 @@ limitations under the License. -->
         group: d.group,
         normal: d.normal,
         merge: d.merge,
+        shortName: d.shortName,
       };
     });
     if (props.config.metricMode === MetricModes.Expression) {