diff --git a/Client/src/Components/Charts/AreaChart/index.jsx b/Client/src/Components/Charts/AreaChart/index.jsx
index ee7e953f5..4c2fc97ba 100644
--- a/Client/src/Components/Charts/AreaChart/index.jsx
+++ b/Client/src/Components/Charts/AreaChart/index.jsx
@@ -85,6 +85,7 @@ const CustomAreaChart = ({
 	customTooltip,
 }) => {
 	const theme = useTheme();
+	const gradientId = `gradient-${Math.random().toString(36).slice(2, 9)}`;
 	return (
 		<ResponsiveContainer
 			width="100%"
@@ -101,6 +102,7 @@ const CustomAreaChart = ({
 				/>
 				{gradient === true &&
 					createGradient({
+						id: gradientId,
 						startColor: gradientStartColor,
 						endColor: gradientEndColor,
 						direction: gradientDirection,
@@ -116,7 +118,7 @@ const CustomAreaChart = ({
 					type="monotone"
 					dataKey={dataKey}
 					stroke={strokeColor}
-					fill={gradient === true ? "url(#colorUv)" : fillColor}
+					fill={gradient === true ? `url(#${gradientId})` : fillColor}
 				/>
 
 				{customTooltip ? (
diff --git a/Client/src/Components/Charts/Utils/gradientUtils.jsx b/Client/src/Components/Charts/Utils/gradientUtils.jsx
index ef967b7ed..b5920374d 100644
--- a/Client/src/Components/Charts/Utils/gradientUtils.jsx
+++ b/Client/src/Components/Charts/Utils/gradientUtils.jsx
@@ -17,7 +17,7 @@
  */
 
 export const createGradient = ({
-	id = "colorUv",
+	id,
 	startColor,
 	endColor,
 	startOpacity = 0.8,