Skip to content

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

Open
somramnani wants to merge 3 commits 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 3 commits 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 out the current branch.
  2. Run npm install, then start the app locally.
  3. Clear site data/cache before testing.
  4. Log in as an admin user.
  5. Navigate to /totalorgsummary.
  6. Verify the Blue Square Stats donut chart percentages are visible and readable on the graph.
  7. Verify the chart labels and percentages remain visible/readable in dark mode

Screenshots or videos of changes:

Screenshot 2026-05-29 at 1 18 29 PM

@netlify
Copy link
Copy Markdown

netlify Bot commented May 14, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 3d67635
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a19cb8db56f530008b44362
😎 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.

@somramnani somramnani added the do not review Do not review or look at code without full context label May 14, 2026
@sonarqubecloud
Copy link
Copy Markdown

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