diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ad99605f..c6058811 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -30,7 +30,7 @@
         "react-select": "^5.8.0",
         "react-select-async-paginate": "0.7.4",
         "react-toastify": "^10.0.5",
-        "recharts": "^2.12.7",
+        "recharts": "^2.13.0-alpha.4",
         "use-query-params": "^2.2.1",
         "yup": "^1.4.0"
       },
@@ -10273,14 +10273,14 @@
       }
     },
     "node_modules/recharts": {
-      "version": "2.12.7",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.12.7.tgz",
-      "integrity": "sha512-hlLJMhPQfv4/3NBSAyq3gzGg4h2v69RJh6KU7b3pXYNNAELs9kEoXOjbkxdXpALqKBoVmVptGfLpxdaVYqjmXQ==",
+      "version": "2.13.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.0-alpha.4.tgz",
+      "integrity": "sha512-K9naL6F7pEcDYJE6yFQASSCQecSLPP0JagnvQ9hPtA/aHgsxsnIOjouLP5yrFZehxzfCkV5TEORr7/uNtSr7Qw==",
       "dependencies": {
         "clsx": "^2.0.0",
         "eventemitter3": "^4.0.1",
         "lodash": "^4.17.21",
-        "react-is": "^16.10.2",
+        "react-is": "^18.3.1",
         "react-smooth": "^4.0.0",
         "recharts-scale": "^0.4.4",
         "tiny-invariant": "^1.3.1",
@@ -10302,6 +10302,11 @@
         "decimal.js-light": "^2.4.1"
       }
     },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index fefcda88..4535b977 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,7 +33,7 @@
     "react-select": "^5.8.0",
     "react-select-async-paginate": "0.7.4",
     "react-toastify": "^10.0.5",
-    "recharts": "^2.12.7",
+    "recharts": "^2.13.0-alpha.4",
     "use-query-params": "^2.2.1",
     "yup": "^1.4.0"
   },
diff --git a/frontend/src/components/LineChart.tsx b/frontend/src/components/LineChart.tsx
index ddaa4557..3d64f0ce 100644
--- a/frontend/src/components/LineChart.tsx
+++ b/frontend/src/components/LineChart.tsx
@@ -11,6 +11,12 @@ import {
 } from 'recharts';
 import { LINE_CHART_OPTIONS } from '../common/constants/line-chart-options';
 
+export interface InitialDataSet {
+  name: string;
+  active: string;
+  archived: string;
+}
+
 export interface DataSet {
   name: string;
   active: number;
diff --git a/frontend/src/services/volunteer/volunteer.api.ts b/frontend/src/services/volunteer/volunteer.api.ts
index a84d7b49..9e3ff248 100644
--- a/frontend/src/services/volunteer/volunteer.api.ts
+++ b/frontend/src/services/volunteer/volunteer.api.ts
@@ -8,7 +8,7 @@ import { AgeRangeEnum } from '../../common/enums/age-range.enum';
 import { AxiosResponseHeaders } from 'axios';
 import { formatEndDateISO9075, formatStartDateISO9075 } from '../../common/utils/utils';
 import { IVolunteerStatistics } from '../../common/interfaces/volunteer-statistics.interface';
-import { DataSet } from '../../components/LineChart';
+import { DataSet, InitialDataSet } from '../../components/LineChart';
 import { PieChartOption } from '../../common/constants/pie-chart-options';
 import { LineChartOption } from '../../common/constants/line-chart-options';
 
@@ -127,8 +127,12 @@ export const getVolunteerStatistics = async (): Promise<IVolunteerStatistics> =>
 };
 
 export const getVolunteerLineChart = async (interval: LineChartOption): Promise<DataSet[]> => {
-  return API.get('/dashboard/volunteer-status-timeseries', { params: { interval } }).then(
-    (res) => res.data,
+  return API.get('/dashboard/volunteer-status-timeseries', { params: { interval } }).then((res) =>
+    res.data.map((item: InitialDataSet) => ({
+      ...item,
+      active: Number(item.active),
+      archived: Number(item.archived),
+    })),
   );
 };