diff --git a/.changeset/tender-lizards-shop.md b/.changeset/tender-lizards-shop.md
new file mode 100644
index 00000000000..d0155ba0534
--- /dev/null
+++ b/.changeset/tender-lizards-shop.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Added missing labels to "Users by time of the day" card at Engagement Dashboard page
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx
index 7f7b11d013f..007e75f9547 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx
@@ -62,7 +62,21 @@ const UsersByTimeOfTheDaySection = ({ timezone }: UsersByTimeOfTheDaySectionProp
return [dates, values];
}, [data, isLoading, utc]);
- const tooltip = useCallback(({ cell }): ReactElement => {t('Value_users', { value: cell.data.y })}, [t]);
+ const tooltip = useCallback(
+ ({ cell }): ReactElement => {
+ return (
+
+ {moment(cell.data.x).format('ddd')}{' '}
+ {moment()
+ .set({ hour: parseInt(cell.serieId, 10), minute: 0, second: 0 })
+ .format('LT')}
+
+ {t('Value_users', { value: cell.data.y })}
+
+ );
+ },
+ [t],
+ );
return (
<>
@@ -124,14 +138,14 @@ const UsersByTimeOfTheDaySection = ({ timezone }: UsersByTimeOfTheDaySectionProp
axisBottom={{
// TODO: Get it from theme
tickSize: 0,
- tickPadding: 4,
+ tickPadding: 8,
tickRotation: 0,
- format: (isoString): string => (dates?.length === 7 ? moment(isoString).format('dddd') : ''),
+ format: (isoString): string => (dates?.length === 8 ? moment(isoString).format('ddd') : ''),
}}
axisLeft={{
// TODO: Get it from theme
tickSize: 0,
- tickPadding: 4,
+ tickPadding: 8,
tickRotation: 0,
format: (hour): string =>
moment()