diff --git a/package-lock.json b/package-lock.json
index ceed020b4..ae03fc7d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
         "@ngx-translate/http-loader": "^16.0.1",
         "@swimlane/ngx-graph": "^10.0.0",
         "@tailwindcss/forms": "^0.5.4",
-        "chart.js": "3.0.0-alpha",
+        "chart.js": "^4.5.1",
         "d3": "^7.9.0",
         "exceljs": "^4.4.0",
         "html2canvas": "^1.4.1",
@@ -5625,9 +5625,9 @@
       "license": "MIT"
     },
     "node_modules/@kurkle/color": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.1.9.tgz",
-      "integrity": "sha512-K3Aul4Ct6O48yWw0/az5rqk2K76oNXXX3Su32Xkh4SfMFvPt0QEkq0Q6+3icE5S3U2c88WAuq3Vh1Iaz4aUH+w==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
       "license": "MIT"
     },
     "node_modules/@leichtgewicht/ip-codec": {
@@ -10122,12 +10122,15 @@
       "license": "MIT"
     },
     "node_modules/chart.js": {
-      "version": "3.0.0-alpha",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.0.0-alpha.tgz",
-      "integrity": "sha512-9jbL1IsG9+1oq01GMKbeJ/257O46nVjQuYWEanpo0MuCr18cXMfkrzBTwdbl0VTOkIvWLJJcU5Cmhdc546k2bA==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
       "dependencies": {
-        "@kurkle/color": "^0.1.6"
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
       }
     },
     "node_modules/check-more-types": {
diff --git a/package.json b/package.json
index 0cbfe3162..064105777 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@ngx-translate/http-loader": "^16.0.1",
     "@swimlane/ngx-graph": "^10.0.0",
     "@tailwindcss/forms": "^0.5.4",
-    "chart.js": "3.0.0-alpha",
+    "chart.js": "^4.5.1",
     "d3": "^7.9.0",
     "exceljs": "^4.4.0",
     "html2canvas": "^1.4.1",
diff --git a/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts b/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts
index cace219e8..444ff0775 100644
--- a/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts
+++ b/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts
@@ -7,12 +7,15 @@ import { ActivatedRoute } from '@angular/router';
 import { HomeService } from '../../home.service';
 
 /** Charting Imports */
-import Chart from 'chart.js';
+import { Chart, registerables } from 'chart.js';
 import { MatCard, MatCardHeader, MatCardContent } from '@angular/material/card';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { NgFor, NgStyle, NgIf } from '@angular/common';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
+// Register Chart.js components
+Chart.register(...registerables);
+
 /**
  * Amount Collected Pie Chart Component
  */
diff --git a/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts b/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts
index 5a33471a9..826d8eeda 100644
--- a/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts
+++ b/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts
@@ -7,12 +7,15 @@ import { ActivatedRoute } from '@angular/router';
 import { HomeService } from '../../home.service';
 
 /** Charting Imports */
-import Chart from 'chart.js';
+import { Chart, registerables } from 'chart.js';
 import { MatCard, MatCardHeader, MatCardContent } from '@angular/material/card';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { NgFor, NgStyle, NgIf } from '@angular/common';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
+// Register Chart.js components
+Chart.register(...registerables);
+
 /**
  * Amount Disbursed Pie Chart Component
  */
diff --git a/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts b/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts
index cc2bea834..0fc628ffa 100644
--- a/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts
+++ b/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts
@@ -12,13 +12,16 @@ import { HomeService } from '../../home.service';
 
 /** Charting Imports */
 import { Dates } from 'app/core/utils/dates';
-import Chart from 'chart.js';
+import { Chart, registerables } from 'chart.js';
 import { MatCard, MatCardHeader, MatCardContent } from '@angular/material/card';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { NgFor, NgStyle } from '@angular/common';
 import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
+// Register Chart.js components
+Chart.register(...registerables);
+
 /**
  * Client Trends Bar Chart Component.
  */
@@ -266,11 +269,11 @@ export class ClientTrendsBarComponent implements OnInit {
           responsive: true,
           scales: {
             y: {
-              beginAtZero: true,
-              scaleLabel: {
+              min: 0,
+              title: {
                 display: true,
-                labelString: 'Values',
-                fontColor: '#1074B9'
+                text: 'Values',
+                color: '#1074B9'
               }
             }
           }
diff --git a/src/app/reports/run-report/chart/chart.component.ts b/src/app/reports/run-report/chart/chart.component.ts
index 0379ed8f1..48bc2a1ef 100644
--- a/src/app/reports/run-report/chart/chart.component.ts
+++ b/src/app/reports/run-report/chart/chart.component.ts
@@ -8,11 +8,14 @@ import { ReportsService } from '../../reports.service';
 import { ChartData } from '../../common-models/chart-data.model';
 
 /** Charting Imports */
-import Chart from 'chart.js';
+import { Chart, registerables } from 'chart.js';
 import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
 import { NgStyle } from '@angular/common';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
+// Register Chart.js components
+Chart.register(...registerables);
+
 /**
  * Chart Component
  */
@@ -81,9 +84,11 @@ export class ChartComponent implements OnChanges {
         ]
       },
       options: {
-        title: {
-          display: true,
-          text: inputData.keysLabel
+        plugins: {
+          title: {
+            display: true,
+            text: inputData.keysLabel
+          }
         }
       }
     });
@@ -110,19 +115,19 @@ export class ChartComponent implements OnChanges {
         ]
       },
       options: {
-        legend: { display: false },
+        plugins: {
+          legend: { display: false }
+        },
         scales: {
-          xAxes: [
-            {
-              scaleLabel: {
-                display: true,
-                labelString: inputData.keysLabel
-              },
-              ticks: {
-                beginAtZero: true
-              }
+          x: {
+            title: {
+              display: true,
+              text: inputData.keysLabel
             }
-          ]
+          },
+          y: {
+            min: 0
+          }
         }
       }
     });