diff --git a/src/components/charts/InstanceActivity.vue b/src/components/charts/InstanceActivity.vue
index ac294d0b..b9c5c337 100644
--- a/src/components/charts/InstanceActivity.vue
+++ b/src/components/charts/InstanceActivity.vue
@@ -126,8 +126,8 @@
                     echarts = echartsModule;
                 }
                 if (this.activityData.length && echarts) {
-                    // actvity data is ready, but world name data isn't ready
-                    // so init echarts with empty data, redcuce the render time of init screen
+                    // activity data is ready, but world name data isn't ready
+                    // so init echarts with empty data, reduce the render time of init screen
                     // TODO: move to created lifecycle, init screen faster
                     this.initEcharts(true);
                     this.getAllDateOfActivity();
@@ -165,11 +165,11 @@
 
                 requestAnimationFrame(() => {
                     this.echartsInstance.setOption(this.getNewOption(isFirstTime), { lazyUpdate: true });
-                    this.echartsInstance.on('click', 'yAxis', this.hanleClickYAxisLable);
+                    this.echartsInstance.on('click', 'yAxis', this.handleClickYAxisLabel);
                     this.isLoading = false;
                 });
             },
-            hanleClickYAxisLable(params) {
+            handleClickYAxisLabel(params) {
                 const detailDataIdx = this.activityDetailData.findIndex(
                     (arr) => arr[0]?.location === this.activityData[params?.dataIndex]?.location
                 );
diff --git a/src/components/charts/InstanceActivityDetail.vue b/src/components/charts/InstanceActivityDetail.vue
index 37f95f9d..41688abf 100644
--- a/src/components/charts/InstanceActivityDetail.vue
+++ b/src/components/charts/InstanceActivityDetail.vue
@@ -24,7 +24,7 @@
 
     export default {
         name: 'InstanceActivityDetail',
-        inject: ['API'],
+        inject: ['API', 'showUserDialog'],
         props: {
             activityDetailData: {
                 type: Array,
@@ -98,11 +98,18 @@
                 });
 
                 this.echartsInstance.setOption(this.getNewOption(), { lazyUpdate: true });
+                this.echartsInstance.on('click', 'yAxis', this.handleClickYAxisLabel);
 
                 setTimeout(() => {
                     this.isLoading = false;
                 }, 200);
             },
+            handleClickYAxisLabel(params) {
+                const userData = this.activityDetailData[params.dataIndex];
+                if (userData?.user_id) {
+                    this.showUserDialog(userData.user_id);
+                }
+            },
             getNewOption() {
                 const getTooltip = (params) => {
                     const activityDetailData = this.activityDetailData;
@@ -152,7 +159,8 @@
                             formatter: (value) => (value.length > 20 ? `${value.slice(0, 20)}...` : value)
                         },
                         inverse: true,
-                        data: this.activityDetailData.map((item) => item.display_name)
+                        data: this.activityDetailData.map((item) => item.display_name),
+                        triggerEvent: true
                     },
                     xAxis: {
                         type: 'value',