diff --git a/docs/charts/basic/area-chart.mdx b/docs/charts/basic/area-chart.mdx
index c7258cc..9ad0390 100644
--- a/docs/charts/basic/area-chart.mdx
+++ b/docs/charts/basic/area-chart.mdx
@@ -55,4 +55,43 @@ export default function Example() {
     <AreaChart data={data} />
   );
 }
+```
+
+## Animation Disabled
+
+```tsx preview
+import { chartDataMedium } from "@/docs/charts/basic/data";
+import { AreaChart } from '@/ui/charts/AreaChart';
+
+export default function Example() {
+  return (
+    <AreaChart data={chartDataMedium} isAnimationActive={false} />
+  );
+}
+```
+
+## Large data series
+
+```tsx preview
+import { chartDataLarge } from "@/docs/charts/basic/data";
+import { AreaChart } from '@/ui/charts/AreaChart';
+
+export default function Example() {
+  return (
+    <AreaChart data={chartDataLarge} isAnimationActive={false} />
+  );
+}
+```
+
+## Maximum data series
+
+```tsx preview
+import { chartDataMaximum } from "@/docs/charts/basic/data";
+import { AreaChart } from '@/ui/charts/AreaChart';
+
+export default function Example() {
+  return (
+    <AreaChart data={chartDataMaximum} isAnimationActive={false} />
+  );
+}
 ```
\ No newline at end of file
diff --git a/docs/charts/basic/bar-chart.mdx b/docs/charts/basic/bar-chart.mdx
index e36b49f..11d43f5 100644
--- a/docs/charts/basic/bar-chart.mdx
+++ b/docs/charts/basic/bar-chart.mdx
@@ -55,4 +55,43 @@ export default function Example() {
     <BarChart data={data} />
   );
 }
+```
+
+## Animation Disabled
+
+```tsx preview
+import { chartDataMedium } from "@/docs/charts/basic/data";
+import { BarChart } from '@/ui/charts/BarChart';
+
+export default function Example() {
+  return (
+    <BarChart data={chartDataMedium} isAnimationActive={false} />
+  );
+}
+```
+
+## Large data series
+
+```tsx preview
+import { chartDataLarge } from "@/docs/charts/basic/data";
+import { BarChart } from '@/ui/charts/BarChart';
+
+export default function Example() {
+  return (
+    <BarChart data={chartDataLarge} isAnimationActive={false} />
+  );
+}
+```
+
+## Maximum data series
+
+```tsx preview
+import { chartDataMaximum } from "@/docs/charts/basic/data";
+import { BarChart } from '@/ui/charts/BarChart';
+
+export default function Example() {
+  return (
+    <BarChart data={chartDataMaximum} isAnimationActive={false} />
+  );
+}
 ```
\ No newline at end of file
diff --git a/docs/charts/basic/data.ts b/docs/charts/basic/data.ts
new file mode 100644
index 0000000..f78a394
--- /dev/null
+++ b/docs/charts/basic/data.ts
@@ -0,0 +1,110 @@
+import type { GroupedData } from "@/ui/charts/util";
+
+export const chartDataMedium: GroupedData<"uv" | "pv" | "av">[] = [
+  "Page A",
+  "Page B",
+  "Page C",
+  "Page D",
+  "Page E"
+].map((name) => ({
+  name,
+  uv: getRandomInt(900, 3000),
+  pv: getRandomInt(900, 3000),
+  av: getRandomInt(900, 3000)
+}));
+
+export const chartDataLarge: GroupedData<"uv" | "pv" | "av" | "rv" | "tv" | "sv">[] = [
+  "Page A",
+  "Page B",
+  "Page C",
+  "Page D",
+  "Page E"
+].map((name) => ({
+  name,
+  uv: getRandomInt(900, 3000),
+  pv: getRandomInt(900, 3000),
+  av: getRandomInt(900, 3000),
+  rv: getRandomInt(900, 3000),
+  tv: getRandomInt(900, 3000),
+  sv: getRandomInt(900, 3000)
+}));
+
+export const chartDataMaximum: GroupedData<
+  | "GDP Growth"
+  | "Inflation Rate"
+  | "Unemployment Rate"
+  | "Interest Rates"
+  | "Consumer Spending"
+  | "Export Volume"
+  | "Import Volume"
+  | "Government Debt"
+  | "Foreign Exchange Reserves"
+>[] = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"].map(
+  (name) => ({
+    name,
+    "GDP Growth": getRandomInt(300, 3000),
+    "Inflation Rate": getRandomInt(300, 3000),
+    "Unemployment Rate": getRandomInt(300, 3000),
+    "Interest Rates": getRandomInt(300, 3000),
+    "Consumer Spending": getRandomInt(300, 3000),
+    "Export Volume": getRandomInt(300, 3000),
+    "Import Volume": getRandomInt(300, 3000),
+    "Government Debt": getRandomInt(300, 3000),
+    "Foreign Exchange Reserves": getRandomInt(300, 3000)
+  })
+);
+
+export const radarDataMedium: GroupedData<"Mike" | "Lily" | "Taylor">[] = [
+  "Math",
+  "Chinese",
+  "English",
+  "Geography",
+  "Physics",
+  "History"
+].map((name) => ({
+  name,
+  Mike: getRandomInt(0, 150),
+  Lily: getRandomInt(0, 150),
+  Taylor: getRandomInt(0, 150)
+}));
+
+/**
+ * Data for the radar chart. Using the category names "Math", "Chinese", "English", "Geography", "Physics", and "History".
+ * The data is grouped by the categories and the students' names are the keys to the scores.
+ * The scores are between 0 and 150. The data should be random and contain both high and low scores.
+ */
+export const radarDataLarge: GroupedData<"Mike" | "Lily" | "Taylor" | "Morgan" | "Casey" | "Jamie">[] = [
+  "Math",
+  "Chinese",
+  "English",
+  "Geography",
+  "Physics",
+  "History"
+].map((name) => ({
+  name,
+  Mike: getRandomInt(0, 150),
+  Lily: getRandomInt(0, 150),
+  Taylor: getRandomInt(0, 150),
+  Morgan: getRandomInt(0, 150),
+  Casey: getRandomInt(0, 150),
+  Jamie: getRandomInt(0, 150)
+}));
+
+export const radarDataBig: GroupedData<
+  "Mike" | "Lily" | "Taylor" | "Morgan" | "Casey" | "Jamie" | "Avery" | "Riley" | "Quinn"
+>[] = ["Math", "Chinese", "English", "Geography", "Physics", "History"].map((name) => ({
+  name,
+  Mike: getRandomInt(0, 150),
+  Lily: getRandomInt(0, 150),
+  Taylor: getRandomInt(0, 150),
+  Morgan: getRandomInt(0, 150),
+  Casey: getRandomInt(0, 150),
+  Jamie: getRandomInt(0, 150),
+  Avery: getRandomInt(0, 150),
+  Riley: getRandomInt(0, 150),
+  Quinn: getRandomInt(0, 150)
+}));
+
+function getRandomInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
diff --git a/docs/charts/basic/line-plot.mdx b/docs/charts/basic/line-plot.mdx
index 544e662..6b6ef49 100644
--- a/docs/charts/basic/line-plot.mdx
+++ b/docs/charts/basic/line-plot.mdx
@@ -55,4 +55,43 @@ export default function Example() {
     <LinePlot data={data} />
   );
 }
+```
+
+## Animation Disabled
+
+```tsx preview
+import { chartDataMedium } from "@/docs/charts/basic/data";
+import { LinePlot } from '@/ui/charts/LinePlot';
+
+export default function Example() {
+  return (
+    <LinePlot data={chartDataMedium} isAnimationActive={false} />
+  );
+}
+```
+
+## Large data series
+
+```tsx preview
+import { chartDataLarge } from "@/docs/charts/basic/data";
+import { LinePlot } from '@/ui/charts/LinePlot';
+
+export default function Example() {
+  return (
+    <LinePlot data={chartDataLarge} isAnimationActive={false} />
+  );
+}
+```
+
+## Maximum data series
+
+```tsx preview
+import { chartDataMaximum } from "@/docs/charts/basic/data";
+import { LinePlot } from '@/ui/charts/LinePlot';
+
+export default function Example() {
+  return (
+    <LinePlot data={chartDataMaximum} isAnimationActive={false} />
+  );
+}
 ```
\ No newline at end of file
diff --git a/docs/charts/basic/pie-chart.mdx b/docs/charts/basic/pie-chart.mdx
index e32b272..905e893 100644
--- a/docs/charts/basic/pie-chart.mdx
+++ b/docs/charts/basic/pie-chart.mdx
@@ -55,4 +55,43 @@ export default function Example() {
     <PieChart data={data} />
   );
 }
+```
+
+## Animation Disabled
+
+```tsx preview
+import { chartDataMedium } from "@/docs/charts/basic/data";
+import { PieChart } from '@/ui/charts/PieChart';
+
+export default function Example() {
+  return (
+    <PieChart data={chartDataMedium} isAnimationActive={false} />
+  );
+}
+```
+
+## Large data series
+
+```tsx preview
+import { chartDataLarge } from "@/docs/charts/basic/data";
+import { PieChart } from '@/ui/charts/PieChart';
+
+export default function Example() {
+  return (
+    <PieChart data={chartDataLarge} isAnimationActive={false} />
+  );
+}
+```
+
+## Maximum data series
+
+```tsx preview
+import { chartDataMaximum } from "@/docs/charts/basic/data";
+import { PieChart } from '@/ui/charts/PieChart';
+
+export default function Example() {
+  return (
+    <PieChart data={chartDataMaximum} isAnimationActive={false} />
+  );
+}
 ```
\ No newline at end of file
diff --git a/docs/charts/basic/radar-chart.mdx b/docs/charts/basic/radar-chart.mdx
index 14494e7..25357b0 100644
--- a/docs/charts/basic/radar-chart.mdx
+++ b/docs/charts/basic/radar-chart.mdx
@@ -5,38 +5,37 @@ RadarChart is a component that displays data in a bar chart format.
 ```tsx preview
 import { RadarChart } from '@/ui/charts/RadarChart';
 
-const data: GroupedData<"uv" | "pv" | "amt">[] = [
+export const data: GroupedData<"Mike" | "Lily">[] = [
   {
-    name: 'Math',
+    name: "Math",
     Mike: 120,
-    Lily: 110,
+    Lily: 100
   },
   {
-    name: 'Chinese',
-    Mike: 98,
-    Lily: 130,
+    name: "Chinese",
+    Mike: 100,
+    Lily: 120
   },
   {
-    name: 'English',
-    Mike: 86,
-    Lily: 130,
+    name: "English",
+    Mike: 110,
+    Lily: 100
   },
   {
-    name: 'Geography',
-    Mike: 99,
-    Lily: 100,
-    fullMark: 150,
+    name: "Geography",
+    Mike: 120,
+    Lily: 100
   },
   {
-    name: 'Physics',
-    Mike: 85,
-    Lily: 90,
+    name: "Physics",
+    Mike: 100,
+    Lily: 120
   },
   {
-    name: 'History',
-    Mike: 65,
-    Lily: 85,
-  },
+    name: "History",
+    Mike: 110,
+    Lily: 100
+  }
 ];
 
 export default function Example() {
@@ -44,4 +43,41 @@ export default function Example() {
     <RadarChart data={data} domain={[0, 150]} />
   );
 }
+```
+
+```tsx preview
+import { radarDataMedium } from "@/docs/charts/basic/data";
+import { RadarChart } from '@/ui/charts/RadarChart';
+
+export default function Example() {
+  return (
+    <RadarChart data={radarDataMedium} domain={[0, 150]} isAnimationActive={false} />
+  );
+}
+```
+
+## Large data series
+
+```tsx preview
+import { radarDataLarge } from "@/docs/charts/basic/data";
+import { RadarChart } from '@/ui/charts/RadarChart';
+
+export default function Example() {
+  return (
+    <RadarChart data={radarDataLarge} domain={[0, 150]} isAnimationActive={false} />
+  );
+}
+```
+
+## Maximum data series
+
+```tsx preview
+import { radarDataBig } from "@/docs/charts/basic/data";
+import { RadarChart } from '@/ui/charts/RadarChart';
+
+export default function Example() {
+  return (
+    <RadarChart data={radarDataBig} domain={[0, 150]} isAnimationActive={false} />
+  );
+}
 ```
\ No newline at end of file
diff --git a/ui/charts/AreaChart.tsx b/ui/charts/AreaChart.tsx
index 308f3a3..8d88f6e 100644
--- a/ui/charts/AreaChart.tsx
+++ b/ui/charts/AreaChart.tsx
@@ -5,9 +5,10 @@ import { type GroupedData, getChartColor } from "./util";
 
 type AreaChartProps<T extends string> = {
   data: GroupedData<T>[];
+  isAnimationActive?: boolean;
 };
 
-export function AreaChart<T extends string>({ data }: AreaChartProps<T>) {
+export function AreaChart<T extends string>({ data, isAnimationActive }: AreaChartProps<T>) {
   const dataKeys = Object.keys(data[0]).filter((key) => key !== "name") as T[];
   return (
     <ResponsiveContainer width="100%" height="100%">
@@ -23,6 +24,7 @@ export function AreaChart<T extends string>({ data }: AreaChartProps<T>) {
             fill={getChartColor(index, dataKeys.length)}
             className="!stroke-border"
             activeDot={{ r: 4 }}
+            isAnimationActive={isAnimationActive}
           />
         ))}
         <XAxis dataKey="name" className="!text-sm" stroke="hsl(var(--muted-foreground))" />
diff --git a/ui/charts/BarChart.tsx b/ui/charts/BarChart.tsx
index fb4e943..d1370b8 100644
--- a/ui/charts/BarChart.tsx
+++ b/ui/charts/BarChart.tsx
@@ -5,9 +5,10 @@ import { type GroupedData, getChartColor } from "./util";
 
 type BarChartProps<T extends string> = {
   data: GroupedData<T>[];
+  isAnimationActive?: boolean;
 };
 
-export function BarChart<T extends string>({ data }: BarChartProps<T>) {
+export function BarChart<T extends string>({ data, isAnimationActive }: BarChartProps<T>) {
   const dataKeys = Object.keys(data[0]).filter((key) => key !== "name") as T[];
   return (
     <ResponsiveContainer width="100%" height="100%">
@@ -15,7 +16,13 @@ export function BarChart<T extends string>({ data }: BarChartProps<T>) {
         <CartesianGrid />
         <Tooltip />
         {dataKeys.map((key, index) => (
-          <Bar key={key} dataKey={key} fill={getChartColor(index, dataKeys.length)} className="!stroke-border" />
+          <Bar
+            key={key}
+            dataKey={key}
+            fill={getChartColor(index, dataKeys.length)}
+            className="!stroke-border"
+            isAnimationActive={isAnimationActive}
+          />
         ))}
         <XAxis dataKey="name" className="!text-sm" stroke="hsl(var(--muted-foreground))" />
         <YAxis className="!text-sm" stroke="hsl(var(--muted-foreground))" />
diff --git a/ui/charts/LinePlot.tsx b/ui/charts/LinePlot.tsx
index fdb8c49..c302c8b 100644
--- a/ui/charts/LinePlot.tsx
+++ b/ui/charts/LinePlot.tsx
@@ -5,9 +5,10 @@ import { type GroupedData, getChartColor } from "./util";
 
 type LinePlotProps<T extends string> = {
   data: GroupedData<T>[];
+  isAnimationActive?: boolean;
 };
 
-export function LinePlot<T extends string>({ data }: LinePlotProps<T>) {
+export function LinePlot<T extends string>({ data, isAnimationActive }: LinePlotProps<T>) {
   const dataKeys = Object.keys(data[0]).filter((key) => key !== "name") as T[];
   return (
     <ResponsiveContainer width="100%" height="100%">
@@ -22,6 +23,7 @@ export function LinePlot<T extends string>({ data }: LinePlotProps<T>) {
             stroke={getChartColor(index, dataKeys.length)}
             className="!stroke-border"
             activeDot={{ r: 4 }}
+            isAnimationActive={isAnimationActive}
           />
         ))}
         <XAxis dataKey="name" className="!text-sm" stroke="hsl(var(--muted-foreground))" />
diff --git a/ui/charts/PieChart.tsx b/ui/charts/PieChart.tsx
index e472c6e..479d45e 100644
--- a/ui/charts/PieChart.tsx
+++ b/ui/charts/PieChart.tsx
@@ -4,6 +4,7 @@ import { type GroupedData, getChartColor } from "./util";
 
 type PieChartProps<T extends string> = {
   data: GroupedData<T>[];
+  isAnimationActive?: boolean;
 };
 
 type Radius = {
@@ -23,7 +24,7 @@ const radius: Radius[] = [
   { innerRadius: 280, outerRadius: 300 }
 ];
 
-export function PieChart<T extends string>({ data }: PieChartProps<T>) {
+export function PieChart<T extends string>({ data, isAnimationActive }: PieChartProps<T>) {
   const dataKeys = Object.keys(data[0]).filter((key) => key !== "name") as T[];
   return (
     <ResponsiveContainer width="100%" height="100%">
@@ -41,6 +42,7 @@ export function PieChart<T extends string>({ data }: PieChartProps<T>) {
             {...radius[index]}
             className="!stroke-border"
             paddingAngle={1}
+            isAnimationActive={isAnimationActive}
           />
         ))}
         <Legend
diff --git a/ui/charts/RadarChart.tsx b/ui/charts/RadarChart.tsx
index ff55936..68fac30 100644
--- a/ui/charts/RadarChart.tsx
+++ b/ui/charts/RadarChart.tsx
@@ -16,17 +16,28 @@ import { type GroupedData, getChartColor } from "./util";
 type RadarChartProps<T extends string> = {
   data: GroupedData<T>[];
   domain: AxisDomain;
+  isAnimationActive?: boolean;
+  fillOpacity?: number;
 };
 
-export function RadarChart<T extends string>({ data, domain }: RadarChartProps<T>) {
+export function RadarChart<T extends string>({
+  data,
+  domain,
+  isAnimationActive,
+  fillOpacity = 0.3
+}: RadarChartProps<T>) {
   const dataKeys = Object.keys(data[0]).filter((key) => key !== "name") as T[];
-  const angle = 360 / dataKeys.length;
   return (
     <ResponsiveContainer width="100%" height="100%">
       <ReRadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
         <PolarGrid />
         <PolarAngleAxis dataKey="name" className="!text-sm" stroke="hsl(var(--foreground))" />
-        <PolarRadiusAxis angle={angle} domain={domain} className="!text-sm" stroke="hsl(var(--muted-foreground))" />
+        <PolarRadiusAxis
+          angle={360 / data.length}
+          domain={domain}
+          className="!text-sm"
+          stroke="hsl(var(--muted-foreground))"
+        />
 
         <Tooltip />
         {dataKeys.map((key, index) => (
@@ -35,8 +46,9 @@ export function RadarChart<T extends string>({ data, domain }: RadarChartProps<T
             dataKey={key}
             stroke={getChartColor(index, dataKeys.length)}
             fill={getChartColor(index, dataKeys.length)}
-            fillOpacity={0.3}
+            fillOpacity={fillOpacity}
             strokeWidth={2}
+            isAnimationActive={isAnimationActive}
           />
         ))}
         <Legend stroke="hsl(var(--muted-foreground))" />