chore(deps): upgrade Chart.js from v3.x to v4.x

Author: shubhamkumar9199

package-lock.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",

package.json

@@ -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
  */

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 Disbursed Pie Chart Component
  */

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.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'
               }
             }
           }

src/app/home/dashboard/client-trends-bar/client-trends-bar.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
+          }
         }
       }
     });