diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index 595836f65..ed3d724e8 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -85,9 +85,10 @@ const CustomToolTip = ({ active, payload, label }) => {
 const CustomTick = ({ x, y, payload, index }) => {
   const theme = useTheme();
 
+  const uiTimezone = useSelector((state) => state.ui.timezone);
+
   // Render nothing for the first tick
   if (index === 0) return null;
-
   return (
     <Text
       x={x}
@@ -97,11 +98,7 @@ const CustomTick = ({ x, y, payload, index }) => {
       fontSize={11}
       fontWeight={400}
     >
-      {formatDate(new Date(payload.value), {
-        year: undefined,
-        month: undefined,
-        day: undefined,
-      })}
+      {formatDateWithTz(payload?.value, "HH:mm:ss", uiTimezone)}
     </Text>
   );
 };
diff --git a/Client/src/Pages/Monitors/Details/Charts/index.jsx b/Client/src/Pages/Monitors/Details/Charts/index.jsx
index b70712340..d38335800 100644
--- a/Client/src/Pages/Monitors/Details/Charts/index.jsx
+++ b/Client/src/Pages/Monitors/Details/Charts/index.jsx
@@ -42,8 +42,8 @@ const CustomLabels = ({
 
 CustomLabels.propTypes = {
   x: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   firstDataPoint: PropTypes.object.isRequired,
   lastDataPoint: PropTypes.object.isRequired,
   type: PropTypes.string.isRequired,