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

[shubhamkumar9199]

Description

Upgraded Chart.js from 3.0.0-alpha to 4.5.1 and updated the codebase for compatibility.
The previous alpha version lacked stability and important security updates.

This upgrade:
Brings a stable, production-ready release
Includes security patches and performance improvements
Dependencies
chart.js: upgraded from 3.0.0-alpha → ^4.5.1

#{Issue Number}
WEB-353

Checklist

Please make sure these boxes are checked before submitting your pull request - thanks!

• If you have multiple commits please combine them into one commit by squashing them.

• Read and understood the contribution guidelines at web-app/.github/CONTRIBUTING.md.

Summary by CodeRabbit

• Chores
  • Updated charting library dependency to the latest stable version
  • Performed internal code maintenance to ensure compatibility with updated dependencies

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

The PR upgrades Chart.js from version 3.0.0-alpha to 4.5.1 and migrates all chart component configurations to the new Chart.js v4 API, including named imports with component registration and updated chart option structures.

Changes

Cohort / File(s)	Summary
Dependency Update package.json	chart.js dependency updated from "3.0.0-alpha" to "^4.5.1"
Chart Component Imports & Registration src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts, src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts, src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts, src/app/reports/run-report/chart/chart.component.ts	Replaces default Chart import with named imports { Chart, registerables } and calls Chart.register(...registerables) at module initialization
Chart Options Migration to v4 API src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts, src/app/reports/run-report/chart/chart.component.ts	Moves title and legend configuration into plugins structure; updates xAxes/yAxes to v4 format (x/y with title and min properties); removes deprecated labelString and fontColor properties

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Verify Chart.js v4 component registration across all chart components
• Validate chart options migration for both pie and bar charts; confirm title, legend, and axis configurations render correctly
• Test bar chart Y-axis configuration changes (beginAtZero/scaleLabel replaced with min/title)
• Confirm no visual or functional regressions in dashboard and report charts

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly and specifically describes the main change: upgrading Chart.js from v3.x to v4.x, which aligns directly with the substantial codebase updates across multiple chart components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts (1)

10-10: LGTM! Migration to Chart.js v4 named imports is correct.

The switch to named imports and component registration aligns with Chart.js v4 requirements.

Consider centralizing the Chart.js registration to avoid duplication. The same registration code appears in multiple components (amount-collected-pie, amount-disbursed-pie, client-trends-bar, and chart components).

You could create a shared initialization file:

// src/app/core/chart-setup.ts
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

Then simply import it once in your app initialization (e.g., main.ts or app.component.ts):

import './core/chart-setup';

Also applies to: 16-17

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 38faa47 and 57583be.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json and included by **/*

📒 Files selected for processing (5)

• package.json (1 hunks)
• src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts (1 hunks)
• src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts (1 hunks)
• src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts (2 hunks)
• src/app/reports/run-report/chart/chart.component.ts (3 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

src/app/**

⚙️ CodeRabbit configuration file

src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.

Files:

• src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts
• src/app/reports/run-report/chart/chart.component.ts
• src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts
• src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts

🔇 Additional comments (7)

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts (2)

15-15: LGTM! Chart.js v4 import and registration is correct.

The migration to named imports and component registration is properly implemented.

Also applies to: 22-23

---

272-277: LGTM! Y-axis configuration correctly migrated to Chart.js v4 API.

The changes properly migrate from the deprecated v2 syntax to the v4 API:

• beginAtZero → min: 0
• scaleLabel → title with text and color properties

This aligns with Chart.js v4 configuration patterns.

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts (1)

10-10: LGTM! Chart.js v4 migration correctly implemented.

The import and registration pattern is correct and consistent with other chart components in this PR.

Also applies to: 16-17

src/app/reports/run-report/chart/chart.component.ts (3)

11-11: LGTM! Chart.js v4 import and registration correctly implemented.

The migration to named imports and component registration follows the same pattern used consistently across all chart components in this PR.

Also applies to: 16-17

---

87-92: LGTM! Pie chart configuration correctly migrated to Chart.js v4 API.

Moving the title from top-level to plugins.title is the correct migration path for Chart.js v4.

---

118-131: LGTM! Bar chart configuration correctly migrated to Chart.js v4 API.

All configuration changes properly align with the v4 API:

• Legend moved to plugins.legend
• Axes configuration migrated from xAxes/yAxes to x/y scale objects
• Added axis titles and min constraint

The migration maintains the intended functionality while conforming to the new Chart.js v4 structure.

package.json (1)

57-57: Chart.js v4.5.1 verified as safe and stable.

Chart.js v4.5.1 exists on npm. The security advisory found (prototype pollution in chart.js) affects versions before 2.9.4, so v4.5.1 is not impacted. The upgrade to this stable release is secure.

[IOhacker]

LGTM