enhancment complete with phase 10

apps/admin/src/components/charts/UserGrowthChart.tsx

@@ -20,63 +20,38 @@ export function UserGrowthChart({
   title = "User Growth",
 }: UserGrowthChartProps) {
   const chartOptions: AgChartOptions = useMemo(
-    () => ({
-      title: {
-        text: title,
-        fontSize: 18,
-        fontWeight: "bold",
-      },
-      data,
-      series: [
-        {
-          type: "line",
-          xKey: "label",
-          yKey: "value",
-          stroke: "#3b82f6",
-          strokeWidth: 3,
-          marker: {
-            size: 6,
-            fill: "#3b82f6",
-            stroke: "#ffffff",
-            strokeWidth: 2,
-          },
-          highlightStyle: {
-            item: {
-              fill: "#1d4ed8",
+    () =>
+      ({
+        title: {
+          text: title,
+        },
+        data,
+        series: [
+          {
+            type: "line",
+            xKey: "label",
+            yKey: "value",
+            stroke: "#3b82f6",
+            strokeWidth: 3,
+            marker: {
+              size: 6,
+              fill: "#3b82f6",
               stroke: "#ffffff",
               strokeWidth: 2,
             },
           },
-        },
-      ],
-      axes: [
-        {
-          type: "category",
-          position: "bottom",
-          title: {
-            text: "Time Period",
-            fontSize: 14,
+        ],
+        axes: [
+          {
+            type: "category",
+            position: "bottom",
           },
-        },
-        {
-          type: "number",
-          position: "left",
-          title: {
-            text: "Number of Users",
-            fontSize: 14,
+          {
+            type: "number",
+            position: "left",
           },
-        },
-      ],
-      legend: {
-        enabled: false,
-      },
-      padding: {
-        top: 20,
-        right: 20,
-        bottom: 20,
-        left: 20,
-      },
-    }),
+        ],
+      }) as any,
     [data, title],
   );