Namitha : Fix resource usage chart grid lines, Y-axis scale, and bar proportions

[Namitha7070]

Description

Related PRS (if any):

Main changes explained:

1. Chart height — Fixed so it no longer stretches to fill the whole screen
2. Bar width — Bars were too thin; made them wider to match the design
3. Y-axis — Was showing odd numbers; now shows clean even intervals
4. Grid lines — Changed from dashed to solid
5. Stacked bars — Fixed so only the top bar has rounded corners
6. Chart margins — Removed extra unused spacing at the bottom

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to dashboard→ /communityportal/reports/resourceusage
   (https://dev.highestgood.com/communityportal/reports/resourceusage)
6. verify the bar chart visually matches the Figma design — bars are wide, grid lines are solid, and Y-axis shows clean even numbers.
7. verify the chart displays correctly at different screen sizes without stretching or compressing.

Screenshots or videos of changes:

Week.37.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	bbfc820
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e93f220151070007303aeb
😎 Deploy Preview	https://deploy-preview-5183--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud