Charts: Add custom legend rendering #45347

adamwoodnz · 2025-10-01T23:06:33Z

Fixes CHARTS-119: Pie/Donut/Semi circle charts: Support custom rendering of legend, allowing rendering of custom legend, which uses CSS grid for layout and has conditional content (the comparison %). The custom legend has access to the colors it needs to match the chart.

Storybook

Woo Analytics

Proposed changes:

Adds support for rendering a custom legend
The render prop receives the generated legend items for the chart, so the consumer can extract whatever data is needed, and return any markup.

A draft PR has been created to update Woo Analytics to use the render prop: https://github.com/woocommerce/woocommerce-analytics/pull/1253

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-donut-chart--custom-legend&args=themeName:woo
Toggle the withComparison control to see the delta visibility and layout centering change
Switch theme and the legend item colors should update along with the chart
Check other Pie and Donut chart legend stories and ensure the legend is not obscured
Advanced: run the build and replace the @automattic/charts package in Woo Analytics with the js-packages/charts dir, and use https://github.com/woocommerce/woocommerce-analytics/pull/1253 to test

github-actions · 2025-10-01T23:07:32Z

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-119-piedonutsemi-circle-charts-support-custom-rendering-of branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack charts-119-piedonutsemi-circle-charts-support-custom-rendering-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-10-01T23:07:39Z

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!

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

jp-launch-control · 2025-10-01T23:20:14Z

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/js-packages/charts/src/stories/sample-data/index.ts	20/20 (100.00%)	0.00%	0 💚

Full summary · PHP report · JS report

adamwoodnz · 2025-10-01T23:21:17Z

projects/js-packages/charts/src/providers/chart-context/themes.ts

-		'#873EFF', // Purple
 		'#66BDFF', // Light blue
+		'#873EFF', // Purple


Swap this order to match that in Woo Analytics

…spacing using column gap

Replicates usage in Woo

…ponents

Copilot

Pull Request Overview

This PR adds support for custom legend rendering in pie chart components, allowing developers to create custom legend layouts beyond the default styling. The changes enable passing a render prop to the Legend component that receives legend items with colors matching the chart.

Adds render prop to legend components that receives generated legend items
Updates default padding values and layout styling for better chart presentation
Includes comprehensive Storybook examples demonstrating custom legend usage

Reviewed Changes

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

Show a summary per file

File	Description
projects/js-packages/charts/src/components/legend/types.ts	Added `render` prop type definition for custom legend rendering
projects/js-packages/charts/src/components/legend/private/base-legend.tsx	Implemented conditional rendering logic using the render prop
projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx	Changed default padding from 20 to 0 for better layout
projects/js-packages/charts/src/components/pie-chart/pie-chart.module.scss	Added flex alignment and gap styling
projects/js-packages/charts/src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss	Added gap styling for consistent spacing
projects/js-packages/charts/src/stories/sample-data/index.ts	Added customer revenue sample data for custom legend examples
projects/js-packages/charts/src/components/pie-chart/stories/donut.stories.tsx	Added comprehensive custom legend story with WooPieLegend component
projects/js-packages/charts/src/components/pie-chart/stories/index.stories.tsx	Updated stories with containerHeight and removed padding args
projects/js-packages/charts/src/providers/chart-context/themes.ts	Reordered theme colors (swapped positions of purple and light blue)
projects/js-packages/charts/src/index.ts	Exported BaseLegendItem type for public use
projects/js-packages/charts/changelog/charts-119-pie-donut-semi-circle-charts-custom-legend	Added changelog entry

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

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

adamwoodnz · 2025-10-06T04:23:15Z

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

+		} }
+	>
+		{ items.map( ( item, index ) => {
+			const { color } = chartItems[ index ];


Extract the color from the legend items in the global charts context, which have a resolved color based on the theme, group, overrides, etc.

adamwoodnz · 2025-10-06T06:35:40Z

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

 	size,
 	thickness = 1,
-	padding = 20,
+	padding = 0,


This is being set to 0 by our consumers and it seems a more sensible default

adamwoodnz · 2025-10-06T06:36:39Z

projects/js-packages/charts/src/components/pie-chart/pie-chart.module.scss

 	flex-direction: column;
 	overflow: hidden;
+	align-items: center;
+	gap: 20px;


Add some default space between the chart and legend. Can be customised using a className.

Nikschavan

This tested well, Thank you for this @adamwoodnz

adamwoodnz self-assigned this Oct 1, 2025

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

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 Oct 1, 2025

adamwoodnz force-pushed the charts-119-piedonutsemi-circle-charts-support-custom-rendering-of branch from e4abcfe to 7c585d1 Compare October 1, 2025 23:18

adamwoodnz commented Oct 1, 2025

View reviewed changes

projects/js-packages/charts/src/components/pie-chart/stories/donut.stories.tsx Outdated Show resolved Hide resolved

adamwoodnz commented Oct 1, 2025

View reviewed changes

adamwoodnz added 9 commits October 6, 2025 17:06

Add custom render function to Legend

b29e11e

Improve Pie chart layout by removing default padding and controlling …

0a3c531

…spacing using column gap

Update Woo colors to match the app

afc6c6b

Add custom legend story for Donut chart

9b9d0a8

Replicates usage in Woo

Add changelog

93ae3bd

Update Pie chart stories

be74ad6

Clean up story and data

559bff5

Enhance legend type exports by adding BaseLegendItem to the chart com…

21c4a02

…ponents

Make gap consistent

840cfd3

adamwoodnz force-pushed the charts-119-piedonutsemi-circle-charts-support-custom-rendering-of branch from f698d20 to 840cfd3 Compare October 6, 2025 04:06

adamwoodnz marked this pull request as ready for review October 6, 2025 04:06

adamwoodnz requested a review from Copilot October 6, 2025 04:07

Copilot AI reviewed Oct 6, 2025

View reviewed changes

projects/js-packages/charts/src/components/pie-chart/stories/donut.stories.tsx Outdated Show resolved Hide resolved

projects/js-packages/charts/src/components/pie-chart/stories/donut.stories.tsx Show resolved Hide resolved

Improve story props and add keys

d632b02

adamwoodnz commented Oct 6, 2025

View reviewed changes

adamwoodnz requested a review from a team October 6, 2025 04:23

adamwoodnz removed the [Status] In Progress label Oct 6, 2025

adamwoodnz added the [Status] Needs Review This PR is ready for review. label Oct 6, 2025

Add tests

28e207e

github-actions bot added the [Tests] Includes Tests label Oct 6, 2025

adamwoodnz commented Oct 6, 2025

View reviewed changes

Nikschavan approved these changes Oct 6, 2025

View reviewed changes

adamwoodnz merged commit c0890ac into trunk Oct 6, 2025
86 of 87 checks passed

adamwoodnz deleted the charts-119-piedonutsemi-circle-charts-support-custom-rendering-of branch October 6, 2025 19:59

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Charts: Add custom legend rendering #45347

Charts: Add custom legend rendering #45347

Uh oh!

adamwoodnz commented Oct 1, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 1, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 1, 2025 •

edited

Loading

Uh oh!

Uh oh!

jp-launch-control bot commented Oct 1, 2025 •

edited

Loading

Uh oh!

adamwoodnz Oct 1, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

adamwoodnz Oct 6, 2025

Uh oh!

adamwoodnz Oct 6, 2025

Uh oh!

adamwoodnz Oct 6, 2025

Uh oh!

Nikschavan left a comment

Uh oh!

Uh oh!

Uh oh!

Charts: Add custom legend rendering #45347

Charts: Add custom legend rendering #45347

Uh oh!

Conversation

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

Uh oh!

Storybook

Woo Analytics

Proposed changes:

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 Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

adamwoodnz Oct 1, 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!

adamwoodnz Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

adamwoodnz Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

adamwoodnz Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

Nikschavan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

adamwoodnz commented Oct 1, 2025 •

edited

Loading

github-actions bot commented Oct 1, 2025 •

edited

Loading

github-actions bot commented Oct 1, 2025 •

edited

Loading

jp-launch-control bot commented Oct 1, 2025 •

edited

Loading