diff --git a/src/views/Charts/components/InstanceActivity.vue b/src/views/Charts/components/InstanceActivity.vue
index 6027a400..027fb09d 100644
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -196,7 +196,8 @@
         activityDetailData,
         isDetailVisible,
         isSoloInstanceVisible,
-        isNoFriendInstanceVisible
+        isNoFriendInstanceVisible,
+        selectedDate
     );
 
     const { isDetailDataFiltered, findMatchingDetailData, generateYAxisLabel } = useChartHelpers();
diff --git a/src/views/Charts/composables/useActivityDataProcessor.js b/src/views/Charts/composables/useActivityDataProcessor.js
index 509b3b8e..96c1452c 100644
--- a/src/views/Charts/composables/useActivityDataProcessor.js
+++ b/src/views/Charts/composables/useActivityDataProcessor.js
@@ -1,14 +1,27 @@
 import { computed } from 'vue';
 
+import dayjs from 'dayjs';
+
 export function useActivityDataProcessor(
     activityData,
     activityDetailData,
     isDetailVisible,
     isSoloInstanceVisible,
-    isNoFriendInstanceVisible
+    isNoFriendInstanceVisible,
+    selectedDate
 ) {
     const totalOnlineTime = computed(() => {
-        return activityData.value?.reduce((acc, item) => acc + item.time, 0);
+        return activityData.value?.reduce((acc, item, idx) => {
+            // If the joinTime of the first data is on the previous day,
+            // and the data traverses midnight, the duration starts at midnight
+            if (idx === 0) {
+                const midnight = dayjs.tz(selectedDate.value).startOf('day');
+                if (midnight.isAfter(item.joinTime)) {
+                    return item.leaveTime - dayjs.tz(midnight).valueOf();
+                }
+            }
+            return acc + item.time;
+        }, 0);
     });
 
     const filteredActivityDetailData = computed(() => {