Skip to content

fix(donut-chart): add externalLabelGuidesPlugin to make percentages visible#5273

Open
somramnani wants to merge 1 commit into
developmentfrom
som-fix/total-org-summary-blue-squares-stats
Open

fix(donut-chart): add externalLabelGuidesPlugin to make percentages visible#5273
somramnani wants to merge 1 commit into
developmentfrom
som-fix/total-org-summary-blue-squares-stats

Conversation

@somramnani
Copy link
Copy Markdown
Contributor

@somramnani somramnani commented May 14, 2026

Description

Screenshot 2026-05-12 at 3 53 28 PM

Related PRS (if any):

This frontend PR is related to the #XXX backend PR.

Main changes explained:

  • Update DonutChart.jsx to follow the Volunteer Status chart pattern by disabling crowded in-slice datalabels and using the shared external label guide plugin to display values and percentages outside the donut chart.
  • Update DonutChart.jsx to also show each category’s value and percentage in the legend, so the breakdown remains visible even if external chart labels are hard to read.
  • Update DonutChart.module.css to give the donut chart more space for external labels and improve spacing between the chart and legend.

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 /totalorgsummary
  6. verify function “A” (feel free to include screenshot here)
  7. verify this new feature works in dark mode

Screenshots or videos of changes:

Screenshot 2026-05-12 at 3 53 49 PM

@netlify
Copy link
Copy Markdown

netlify Bot commented May 14, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit e47d8b8
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a0606152a51450008c72fe0
😎 Deploy Preview https://deploy-preview-5273--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@sonarqubecloud
Copy link
Copy Markdown

@somramnani somramnani added the do not review Do not review or look at code without full context label May 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

do not review Do not review or look at code without full context

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant