Fix labelBackgroundColor to apply to background instead of text #44990

annacmc · 2025-08-28T05:50:11Z

Fix labelBackgroundColor to apply to background instead of text

Proposed changes:

Fix Label Color Bug: Fixes issue where labelBackgroundColor was incorrectly applied as text color instead of background color in pie charts
Implement Label Backgrounds: Adds functional label background rendering with rounded rectangles behind pie chart labels
Separate Color Controls: Introduces new labelTextColor property to properly control text color independently from background
Preserve Original Appearance: Sets defaults to transparent background and light text to maintain backward compatibility

Key improvements:

Resolves Linear issue CHARTS-100 where white labelBackgroundColor made labels invisible on light segments
Adds proper labelTextColor property to ChartTheme interface for explicit text color control
Implements visual label backgrounds that render when labelBackgroundColor is set to any non-transparent value
Enhances Storybook with interactive controls for both labelTextColor and labelBackgroundColor
Updates all three themes (default, jetpack, woo) with appropriate defaults
Maintains backward compatibility - existing charts look identical unless customized

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

No, this PR only affects chart rendering and theme properties. No tracking or user data changes.

Testing instructions:

Test Default Appearance (No Visual Changes)

Run Storybook: pnpm run storybook:dev
Navigate to Pie Chart stories
Verify default pie chart labels look exactly the same as before (light text, no backgrounds)
Confirm existing implementations are not affected

Test Label Color Controls in Storybook

Go to the "Custom Label Colors" story
Use the color picker controls in the Storybook panel:
- labelTextColor: Try different text colors (default is #FFF)
- labelBackgroundColor: Try different background colors (default is transparent)
Verify text color changes independently from background
Verify backgrounds appear as rounded rectangles when set to any non-transparent color

…Color

…appearance

github-actions · 2025-08-28T05:51:01Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the fix/charts-100-fix-labelbackgroundcolor-to-apply-to-background-instead-of branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/charts-100-fix-labelbackgroundcolor-to-apply-to-background-instead-of

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-08-28T05:51:07Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

jp-launch-control · 2025-08-28T06:03:16Z

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx	59/63 (93.65%)	0.55%	0 💚

Full summary · PHP report · JS report

- Update labelTextColor from #333 to #FFFFFF in all themes (default, jetpack, woo) - Maintains original chart appearance with white text on segments - Ensures consistent behavior across all theme variations

- Remove direct theme prop from PieChart component - Wrap PieChart in ThemeProvider when theme is provided - Handle all theme variations (default, jetpack, woo, object) - Convert nested ternaries to if-else statements for linter compliance - Resolves TS2322 error about theme prop not existing

halfo

Works as described. 👍🏿

kangzj · 2025-08-28T21:28:38Z

projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx


+									// Estimate text width more accurately for background sizing
+									const fontSize = 12;
+									const estimatedTextWidth = arc.data.label.length * fontSize * 0.6; // Rough estimate


Could we please try to use getStringWidth instead:

jetpack/projects/js-packages/charts/src/components/shared/utils.ts

Line 24 in 2cf8757

return getStringWidth( longestTick, labelStyle );

kangzj

LGTM! Let't take a look at the feedback with a follow up.

kangzj · 2025-09-02T03:26:14Z

projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx

 									return (
 										<g key={ `arc-${ index }` }>
 											<path { ...pathProps } />
 											{ hasSpaceForLabel && (


We should probably skip the rendering if the label is set to empty

annacmc added 8 commits August 28, 2025 13:34

Add labelTextColor property to ChartTheme interface

e723945

Add labelTextColor to all theme configurations

4d5f865

Fix pie chart labels to use labelTextColor instead of labelBackground…

e88e975

…Color

Add Storybook controls and documentation for label color properties

5786cce

Remove non-functional labelBackgroundColor control from Storybook

8f74158

Implement functional labelBackgroundColor with visual backgrounds

6941a1d

Set labelBackgroundColor default to transparent to preserve original …

9f92832

…appearance

changelog

fa42add

github-actions bot added [JS Package] Charts RNA labels Aug 28, 2025

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Aug 28, 2025

Set default label text color to white

19deb86

- Update labelTextColor from #333 to #FFFFFF in all themes (default, jetpack, woo) - Maintains original chart appearance with white text on segments - Ensures consistent behavior across all theme variations

annacmc marked this pull request as draft August 28, 2025 06:20

annacmc self-assigned this Aug 28, 2025

github-actions bot added the [Status] In Progress label Aug 28, 2025

annacmc added [Type] Bug When a feature is broken and / or not performing as intended [Status] Needs Review This PR is ready for review. and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Aug 28, 2025

annacmc marked this pull request as ready for review August 28, 2025 07:50

annacmc requested review from a team, adamwoodnz and kangzj August 28, 2025 08:17

halfo approved these changes Aug 28, 2025

View reviewed changes

kangzj reviewed Aug 28, 2025

View reviewed changes

kangzj approved these changes Sep 1, 2025

View reviewed changes

annacmc merged commit bafb011 into trunk Sep 1, 2025
88 of 89 checks passed

annacmc deleted the fix/charts-100-fix-labelbackgroundcolor-to-apply-to-background-instead-of branch September 1, 2025 01:55

github-actions bot removed [Status] In Progress [Status] Needs Review This PR is ready for review. labels Sep 1, 2025

kangzj reviewed Sep 2, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix labelBackgroundColor to apply to background instead of text #44990

Fix labelBackgroundColor to apply to background instead of text #44990

Uh oh!

annacmc commented Aug 28, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 28, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 28, 2025 •

edited

Loading

Uh oh!

jp-launch-control bot commented Aug 28, 2025 •

edited

Loading

Uh oh!

halfo left a comment

Uh oh!

kangzj Aug 28, 2025 •

edited

Loading

Uh oh!

kangzj left a comment •

edited

Loading

Uh oh!

Uh oh!

kangzj Sep 2, 2025

Uh oh!

kangzj Sep 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Fix labelBackgroundColor to apply to background instead of text #44990

Fix labelBackgroundColor to apply to background instead of text #44990

Uh oh!

Conversation

annacmc commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Test Default Appearance (No Visual Changes)

Test Label Color Controls in Storybook

Uh oh!

github-actions bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

halfo left a comment

Choose a reason for hiding this comment

Uh oh!

kangzj Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kangzj left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kangzj Sep 2, 2025

Choose a reason for hiding this comment

Uh oh!

kangzj Sep 2, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

annacmc commented Aug 28, 2025 •

edited

Loading

github-actions bot commented Aug 28, 2025 •

edited

Loading

github-actions bot commented Aug 28, 2025 •

edited

Loading

jp-launch-control bot commented Aug 28, 2025 •

edited

Loading

kangzj Aug 28, 2025 •

edited

Loading

kangzj left a comment •

edited

Loading