diff --git a/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx b/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx
index 48cc83cfb..b4220d6ff 100644
--- a/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx
+++ b/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx
@@ -1,6 +1,6 @@
 import styles from "./TimelineBarChart.module.sass";
 import { StatsMode } from "../TrafficStatsModal"
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
     BarChart,
     Bar,
@@ -20,40 +20,24 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
     const [protocolStats, setProtocolStats] = useState([]);
     const [protocolsNamesAndColors, setProtocolsNamesAndColors] = useState([]);
 
-    const padTo2Digits = useCallback((num) => {
-        return String(num).padStart(2, '0');
-    }, [])
-
-    const getHoursAndMinutes = useCallback((protocolTimeKey) => {
-        const time = new Date(protocolTimeKey)
-        const hoursAndMinutes = padTo2Digits(time.getHours()) + ':' + padTo2Digits(time.getMinutes());
-        return hoursAndMinutes;
-    }, [padTo2Digits])
-
-    const creatUniqueObjArray = useCallback((objArray) => {
-        return [
-            ...new Map(objArray.map((item) => [item["name"], item])).values(),
-        ];
-    }, [])
-
     useEffect(() => {
         if (!data) return;
         const protocolsBarsData = [];
         const prtcNames = [];
         data.forEach(protocolObj => {
             let obj: { [k: string]: any } = {};
-            obj.timestamp = getHoursAndMinutes(protocolObj.timestamp);
+            obj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp);
             protocolObj.protocols.forEach(protocol => {
                 obj[`${protocol.name}`] = protocol[StatsMode[timeLineBarChartMode]];
                 prtcNames.push({ name: protocol.name, color: protocol.color });
             })
             protocolsBarsData.push(obj);
         })
-        const uniqueObjArray = creatUniqueObjArray(prtcNames);
+        const uniqueObjArray = Utils.creatUniqueObjArrayByProp(prtcNames, "name")
         protocolsBarsData.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1);
         setProtocolStats(protocolsBarsData);
         setProtocolsNamesAndColors(uniqueObjArray);
-    }, [data, timeLineBarChartMode, setProtocolStats, setProtocolsNamesAndColors, creatUniqueObjArray, getHoursAndMinutes])
+    }, [data, timeLineBarChartMode])
 
     const bars = useMemo(() => protocolsNamesAndColors.map((protocolToDIsplay) => {
         return <Bar key={protocolToDIsplay.name} dataKey={protocolToDIsplay.name} stackId="a" fill={protocolToDIsplay.color} />
@@ -61,7 +45,7 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
 
     return (
         <div className={styles.barChartContainer}>
-            <BarChart
+            {protocolStats.length > 0 && <BarChart
                 width={730}
                 height={250}
                 data={protocolStats}
@@ -77,7 +61,7 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
                 <Tooltip formatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value + " Requests"} />
                 <Legend />
                 {bars}
-            </BarChart>
+            </BarChart>}
         </div>
     );
 }
diff --git a/ui-common/src/helpers/Utils.ts b/ui-common/src/helpers/Utils.ts
index 554a704a8..65744cb23 100644
--- a/ui-common/src/helpers/Utils.ts
+++ b/ui-common/src/helpers/Utils.ts
@@ -2,10 +2,10 @@ const IP_ADDRESS_REGEX = /([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3})(:([0-9]{
 
 
 export class Utils {
-    static isIpAddress = (address: string): boolean => IP_ADDRESS_REGEX.test(address)
-    static lineNumbersInString = (code:string): number => code.split("\n").length;
+  static isIpAddress = (address: string): boolean => IP_ADDRESS_REGEX.test(address)
+  static lineNumbersInString = (code: string): number => code.split("\n").length;
 
-  static humanFileSize(bytes, si=false, dp=1) {
+  static humanFileSize(bytes, si = false, dp = 1) {
     const thresh = si ? 1000 : 1024;
 
     if (Math.abs(bytes) < thresh) {
@@ -16,7 +16,7 @@ export class Utils {
       ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
       : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
     let u = -1;
-    const r = 10**dp;
+    const r = 10 ** dp;
 
     do {
       bytes /= thresh;
@@ -26,4 +26,20 @@ export class Utils {
 
     return bytes.toFixed(dp) + ' ' + units[u];
   }
+
+  static padTo2Digits = (num) => {
+    return String(num).padStart(2, '0');
+  }
+
+  static getHoursAndMinutes = (protocolTimeKey) => {
+    const time = new Date(protocolTimeKey)
+    const hoursAndMinutes = Utils.padTo2Digits(time.getHours()) + ':' + Utils.padTo2Digits(time.getMinutes());
+    return hoursAndMinutes;
+  }
+
+  static creatUniqueObjArrayByProp = (objArray, prop) => {
+    const map = new Map(objArray.map((item) => [item[prop], item])).values()
+    return Array.from(map);
+  }
+
 }