diff --git a/src/components/Charts/Bar.jsx b/src/components/Charts/Bar.jsx
index ea39979..fa2293c 100644
--- a/src/components/Charts/Bar.jsx
+++ b/src/components/Charts/Bar.jsx
@@ -1,6 +1,6 @@
 'use client';
 import React, { useRef, useState } from 'react';
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from './ReactEChartsNoSSR';
 import isEqual from 'lodash/isEqual';
 import Loading from '../Loading';
 import Link from 'next/link';
diff --git a/src/components/Charts/Guage.jsx b/src/components/Charts/Guage.jsx
index 98fa501..049bbb7 100644
--- a/src/components/Charts/Guage.jsx
+++ b/src/components/Charts/Guage.jsx
@@ -1,6 +1,6 @@
 'use client'
 import React, { useState } from 'react'
-import ReactECharts from 'echarts-for-react'
+import ReactECharts from './ReactEChartsNoSSR'
 import isEqual from 'lodash/isEqual'
 import Loading from '../Loading'
 
diff --git a/src/components/Charts/HeatMap.jsx b/src/components/Charts/HeatMap.jsx
index 4ec20cc..223f56a 100644
--- a/src/components/Charts/HeatMap.jsx
+++ b/src/components/Charts/HeatMap.jsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from './ReactEChartsNoSSR';
 import styles from './styles.module.css';
 import Loading from '../Loading';
 import Link from 'next/link';
diff --git a/src/components/Charts/HorizontalBar.jsx b/src/components/Charts/HorizontalBar.jsx
index 2abcc0c..124babb 100644
--- a/src/components/Charts/HorizontalBar.jsx
+++ b/src/components/Charts/HorizontalBar.jsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from './ReactEChartsNoSSR';
 import styles from './styles.module.css';
 import { formatNumber, toValidStyleName } from '@/utils/utils';
 import Loading from '../Loading';
diff --git a/src/components/Charts/Line.jsx b/src/components/Charts/Line.jsx
index cb75ffb..4b28c15 100644
--- a/src/components/Charts/Line.jsx
+++ b/src/components/Charts/Line.jsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from './ReactEChartsNoSSR';
 import styles from './styles.module.css';
 import Loading from '../Loading';
 import Link from 'next/link';
diff --git a/src/components/Charts/MultiLine.jsx b/src/components/Charts/MultiLine.jsx
index 4bbbd2b..d424d52 100644
--- a/src/components/Charts/MultiLine.jsx
+++ b/src/components/Charts/MultiLine.jsx
@@ -1,6 +1,6 @@
 'use client';
 import React, { useRef, useState } from 'react';
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from './ReactEChartsNoSSR';
 import isEqual from 'lodash/isEqual';
 import Loading from '../Loading';
 import Link from 'next/link';
diff --git a/src/components/Charts/Pie.jsx b/src/components/Charts/Pie.jsx
index 3e3e419..08256b3 100644
--- a/src/components/Charts/Pie.jsx
+++ b/src/components/Charts/Pie.jsx
@@ -1,4 +1,4 @@
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from './ReactEChartsNoSSR';
 import Loading from '../Loading';
 import isEqual from 'lodash/isEqual';
 import { useState } from 'react';
diff --git a/src/components/Charts/PunchCard.jsx b/src/components/Charts/PunchCard.jsx
index 0ec8e54..db898f7 100644
--- a/src/components/Charts/PunchCard.jsx
+++ b/src/components/Charts/PunchCard.jsx
@@ -1,6 +1,6 @@
 'use client';
 import React, { useState } from 'react';
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from './ReactEChartsNoSSR';
 import isEqual from 'lodash/isEqual';
 import Loading from '../Loading';
 import Link from 'next/link';
diff --git a/src/components/Charts/Radar.jsx b/src/components/Charts/Radar.jsx
index 5d2b064..7b6656f 100644
--- a/src/components/Charts/Radar.jsx
+++ b/src/components/Charts/Radar.jsx
@@ -1,5 +1,5 @@
 'use client';
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from './ReactEChartsNoSSR';
 import isEqual from 'lodash/isEqual';
 import Loading from '../Loading';
 import { useState } from 'react';
diff --git a/src/components/Charts/ReactEChartsNoSSR.js b/src/components/Charts/ReactEChartsNoSSR.js
new file mode 100644
index 0000000..614c428
--- /dev/null
+++ b/src/components/Charts/ReactEChartsNoSSR.js
@@ -0,0 +1,5 @@
+// src/components/Charts/ReactEChartsNoSSR.js
+'use client';
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('echarts-for-react'), { ssr: false });