Charts: generate extra colors from color palette #45276

adamwoodnz · 2025-09-23T01:28:08Z

Fixes CHARTS-107: Generate extra colors for charts from primary color

Proposed changes:

Adds color generation to the global chart context so that if a color is required for an index greater than the number of colors in the theme, a color will be provided which is complementary to the existing colors. Ensures generated colors are within the hue range of the existing colors, but sufficiently different from them, and have sufficient contrast for accessibility.
Adds a story with 8 required colors and supporting sample data
Adds tests for the chart context changes and new color utils

Screenshots

In both cases the first 5 colors are from theme.colors

Jetpack	Woo

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?

Testing instructions:

Go to http://localhost:50240/?path=/story/js-packages-charts-types-line-chart--many-series
Compare last 3 colors to first 5 from theme, they should be sufficiently different, have sufficient contrast and feel complementary (not clashing)
Switch to the other themes and do the same
Smoke test other stories for changes to colors

github-actions · 2025-09-23T01:28:59Z

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 charts-107-generate-extra-colors-for-charts-from-primary-color branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack charts-107-generate-extra-colors-for-charts-from-primary-color

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-09-23T01:29:19Z

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-09-23T01:41:26Z

Code Coverage Summary

Coverage changed in 2 files.

File	Coverage	Δ%	Δ Uncovered
projects/js-packages/charts/src/providers/chart-context/global-charts-provider.tsx	52/52 (100.00%)	0.00%	0 💚
projects/js-packages/charts/src/utils/color-utils.ts	49/49 (100.00%)	0.00%	0 💚

1 file is newly checked for coverage.

File	Coverage
projects/js-packages/charts/src/providers/chart-context/private/get-chart-color.ts	44/51 (86.27%) 💚

Full summary · PHP report · JS report

adamwoodnz · 2025-09-23T03:21:33Z

projects/js-packages/charts/src/components/line-chart/stories/annotation.stories.tsx

-					datum={ sampleData[ 1 ].data[ sampleData[ 1 ].data.length - 10 ] }
+					datum={ sampleData[ 1 ].data[ 1 ] }
 					title="Another notable event"
 					subtitle="This is another notable event"
 					{ ...( annotationArgs?.[ 1 ] || {} ) }
 				/>
 				<LineChart.Annotation
-					datum={ sampleData[ 2 ].data[ sampleData[ 2 ].data.length - 51 ] }
+					datum={ sampleData[ 2 ].data[ 7 ] }


When the sample data was updated sometime recently these indexes broke. Fixing here as I'm touching the sample data again.

Copilot

Pull Request Overview

This PR adds automatic color generation for charts when the number of data series exceeds the available theme colors. Instead of cycling through the existing palette, the system now generates complementary colors using the golden ratio and perceptual distance algorithms to ensure good visual distinction and accessibility.

Implements color generation algorithms using HSL color space with distance calculations
Adds performance optimizations through color caching in the chart context
Extends sample data and stories to demonstrate charts with 8+ series

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
projects/js-packages/charts/src/utils/color-utils.ts	Adds `hexToHsl` and `getColorDistance` functions for color conversion and perceptual distance calculation
projects/js-packages/charts/src/utils/test/color-utils.test.ts	Comprehensive test suite for new color utility functions
projects/js-packages/charts/src/providers/chart-context/private/get-chart-color.ts	Core color generation logic using golden ratio and distance algorithms
projects/js-packages/charts/src/providers/chart-context/global-charts-provider.tsx	Integrates color caching and generation into the chart context
projects/js-packages/charts/src/providers/chart-context/test/chart-context.test.tsx	Updates tests to verify color generation behavior instead of cycling

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

projects/js-packages/charts/src/utils/color-utils.ts

projects/js-packages/charts/src/providers/chart-context/private/get-chart-color.ts

adamwoodnz · 2025-09-23T04:11:54Z

projects/js-packages/charts/src/providers/chart-context/private/get-chart-color.ts

+	for ( let attempt = 0; attempt < maxAttempts; attempt++ ) {
+		let hue = ( ( index - colors.length + attempt * 0.1 ) * goldenRatio * 360 ) % 360;
+
+		// If we have existing colors, constrain new colors to their hue range


Hue range for Jetpack is wide (lots of different colors), whereas hue range is small for Woo (all blue/purple/pink). Consider this when generating.

- Introduced constants for golden ratio, minimum color distance, and maximum generation attempts to improve readability and maintainability. - Added detailed comments to clarify the purpose of each constant and the overall color generation process.

kangzj

Looks good to me!

kangzj · 2025-09-25T04:14:21Z

projects/js-packages/charts/src/providers/chart-context/global-charts-provider.tsx

+		// Process all colors once and cache the results
+		if ( Array.isArray( colors ) ) {
+			for ( const color of colors ) {
+				if ( color && typeof color === 'string' && color.startsWith( '#' ) ) {


What happens for named colors, like red, dodgerblue etc? if we don't not support them then we should probably be clear in the documentation.

kangzj · 2025-09-25T04:28:47Z

@adamwoodnz just dumping some thoughts on next steps here - I don't think there would be a lot of use cases where we need more series than 10, so it's definitely not a priority right now.

We could use combinations of color, glyph and pattern to multiply the choice of series / bar styles. For example, if we have 5 colors, 4 glyphs and 3 patterns, we'd have 5x4x3=60 combinations! It'll be impossible for consumers to exceed the limit 😄

adamwoodnz added 4 commits September 23, 2025 11:57

Expand temperature data to 8 cities

e2e313d

Fix annotation positions

df53d54

Generate new colors from palette if palette is exhausted

771da03

Add changelog

e3392a4

adamwoodnz self-assigned this Sep 23, 2025

github-actions bot added [JS Package] Charts [Status] In Progress RNA labels Sep 23, 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 Sep 23, 2025

Fix and update tests

0f0a402

github-actions bot added the [Tests] Includes Tests label Sep 23, 2025

adamwoodnz commented Sep 23, 2025

View reviewed changes

adamwoodnz added [Type] Feature Development of a new feature 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 Sep 23, 2025

Add tests for new color utils

dd36607

adamwoodnz force-pushed the charts-107-generate-extra-colors-for-charts-from-primary-color branch from 866c1b2 to dd36607 Compare September 23, 2025 03:31

adamwoodnz requested a review from Copilot September 23, 2025 03:44

Copilot AI reviewed Sep 23, 2025

View reviewed changes

Validate hex input in utils

64c7ba0

adamwoodnz commented Sep 23, 2025

View reviewed changes

adamwoodnz marked this pull request as ready for review September 23, 2025 04:48

adamwoodnz requested a review from a team September 23, 2025 04:48

adamwoodnz added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels Sep 24, 2025

kangzj approved these changes Sep 25, 2025

View reviewed changes

kangzj merged commit 51e30a0 into trunk Sep 25, 2025
114 of 116 checks passed

kangzj deleted the charts-107-generate-extra-colors-for-charts-from-primary-color branch September 25, 2025 04:28

github-actions bot removed the [Status] Needs Review This PR is ready for review. label Sep 25, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Charts: generate extra colors from color palette #45276

Charts: generate extra colors from color palette #45276

Uh oh!

adamwoodnz commented Sep 23, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 23, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 23, 2025 •

edited

Loading

Uh oh!

jp-launch-control bot commented Sep 23, 2025 •

edited

Loading

Uh oh!

adamwoodnz Sep 23, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adamwoodnz Sep 23, 2025

Uh oh!

kangzj left a comment

Uh oh!

kangzj Sep 25, 2025

Uh oh!

kangzj commented Sep 25, 2025

Uh oh!

Uh oh!

Uh oh!

Charts: generate extra colors from color palette #45276

Charts: generate extra colors from color palette #45276

Uh oh!

Conversation

adamwoodnz commented Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Screenshots

Other information:

Jetpack product discussion

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

Testing instructions:

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

adamwoodnz Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adamwoodnz Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

kangzj left a comment

Choose a reason for hiding this comment

Uh oh!

kangzj Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

kangzj commented Sep 25, 2025

Uh oh!

Uh oh!

Uh oh!

adamwoodnz commented Sep 23, 2025 •

edited

Loading

github-actions bot commented Sep 23, 2025 •

edited

Loading

github-actions bot commented Sep 23, 2025 •

edited

Loading

jp-launch-control bot commented Sep 23, 2025 •

edited

Loading