From a2a8a32d1cc708622d6322f7b6a8dad0bca7d30b Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Wed, 1 Feb 2023 17:34:17 +0800
Subject: [PATCH] fix: different time formats in hover legend and x-axis on
 charts (#2040)

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>
Co-authored-by: Rafael <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: gitstart_bot <gitstart_bot@users.noreply.github.com>
Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
---
 frontend/src/components/Graph/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/Graph/index.tsx b/frontend/src/components/Graph/index.tsx
index b51772d62d..75b6ace889 100644
--- a/frontend/src/components/Graph/index.tsx
+++ b/frontend/src/components/Graph/index.tsx
@@ -23,6 +23,7 @@ import {
 } from 'chart.js';
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import annotationPlugin from 'chartjs-plugin-annotation';
+import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import React, { useCallback, useEffect, useRef } from 'react';
 
@@ -150,6 +151,10 @@ function Graph({
 					},
 					tooltip: {
 						callbacks: {
+							title(context) {
+								const date = dayjs(context[0].parsed.x);
+								return date.format('MMM DD, YYYY, HH:mm:ss');
+							},
 							label(context) {
 								let label = context.dataset.label || '';