Charts: Add interactive legend for toggling series visibility in LineChart #45506

annacmc · 2025-10-15T12:14:46Z

Proposed changes:

This PR adds interactive legend support to LineChart only, allowing users to toggle series visibility by clicking or using keyboard navigation.

Implementation Details:

Add toggleSeriesVisibility, isSeriesVisible, and getHiddenSeries methods to GlobalChartsContext for managing series visibility state
Implement visibility state management in GlobalChartsProvider using a Map to track hidden series per chart
Add interactive prop to Legend component and LineChart (defaults to false for backward compatibility)
Add click and keyboard event handlers to BaseLegend with full accessibility support (ARIA attributes, focus management, Enter/Space key navigation)
Add CSS styles for interactive legend states including hover effects, focus outlines, and visual feedback for hidden series (reduced opacity, strikethrough)
Filter visible series in LineChart based on visibility state from context, preserving original indices for color stability
Scope: Currently implemented for LineChart only. BarChart, PieChart, and other chart types will be supported in future PRs

Test Coverage:

Added 18 new tests covering:
- GlobalChartsProvider series visibility management (8 tests)
- BaseLegend interactive functionality (7 tests)
- LineChart interactive filtering (3 tests)
All 516 tests passing with 100% code coverage

Documentation:

Updated LineChart documentation with interactive legend section
Updated Legend documentation with comprehensive interactive guide
Added interactive prop to Legend API reference
Created WithInteractiveLegend Storybook story

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)?

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

No, it does not.

Testing instructions:

Quick Start - Storybook Demo

Find the interactive legend story:

Start Storybook: pnpm run storybook
Navigate to: JS Packages → Charts → Types → Line Chart
Select the "With Interactive Legend" story from the sidebar

Test the interactive features:

Click to toggle: Click on any legend item (e.g., "London", "Canberra") to hide/show that series
Visual feedback: Hidden series show reduced opacity and strikethrough text
Color stability: Toggle series on/off multiple times - colors remain consistent
Keyboard navigation:
- Press Tab to focus legend items
- Press Enter or Space to toggle visibility
- Verify focus outline appears
Accessibility:
- Use a screen reader to verify ARIA announcements
- Legend items announce as buttons with "visible" or "hidden" state

Feature Requirements

Interactive legends require:

GlobalChartsProvider: Chart must be wrapped in provider (already done in Storybook)
chartId prop: Unique identifier for the chart (e.g., chartId="sales-chart")
interactive prop: Set to true on LineChart (e.g., interactive={true})
showLegend prop: Must be true to display the legend

Example:

<GlobalChartsProvider>
  <LineChart
    data={data}
    chartId="my-chart"
    showLegend={true}
    interactive={true}
  />
</GlobalChartsProvider>

Backward Compatibility Testing

Verify existing functionality still works:

Check other LineChart stories (Default, Single Series, etc.) - legends should be non-interactive
Verify that charts without interactive prop work exactly as before
Confirm legends without chartId work as standalone components

Current Scope

✅ Supported: LineChart with interactive legends
❌ Not Yet: BarChart, PieChart, BarListChart, LeaderboardChart (will be added in future PRs)

Code Coverage

Run tests to verify coverage:

pnpm test
# All 516 tests should pass

github-actions · 2025-10-15T12:15:43Z

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 add/charts-54-legends-toggling-visibility-of-series branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/charts-54-legends-toggling-visibility-of-series

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-15T12:15:52Z

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!

Copilot

Pull Request Overview

Adds interactive legend support to toggle series visibility across charts. Key changes introduce visibility state management in the global charts context, wire up interactive legend behaviors with full keyboard/ARIA support, and update chart components to respect hidden series while preserving color consistency via original series indices.

Add series visibility API to GlobalChartsContext (toggle/isVisible/getHiddenSeries) and implement state via Map<chartId, Set>
Update LineChart, BarChart, and PieChart to filter hidden series and preserve original indices for consistent colors
Make Legend items interactive (click and keyboard), with new styles and Storybook story; pass chartId automatically from context

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
projects/js-packages/charts/src/stories/legend-config.tsx	Adds a Storybook argType for enabling interactive legends
projects/js-packages/charts/src/providers/chart-context/types.ts	Extends GlobalChartsContextValue with methods for series visibility
projects/js-packages/charts/src/providers/chart-context/global-charts-provider.tsx	Implements visibility state and exposes toggle/isVisible/getHiddenSeries
projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx	Filters hidden series and preserves original indices for colors
projects/js-packages/charts/src/components/line-chart/line-chart.tsx	Filters hidden series; uses original indices to keep colors/IDs stable
projects/js-packages/charts/src/components/legend/types.ts	Adds interactive and chartId props to BaseLegend/Legend props
projects/js-packages/charts/src/components/legend/stories/index.stories.tsx	Adds InteractiveLegend story demonstrating toggling
projects/js-packages/charts/src/components/legend/private/base-legend.tsx	Adds interactive behaviors, handlers, ARIA, and styling hooks
projects/js-packages/charts/src/components/legend/private/base-legend.module.scss	Adds styles for interactive and inactive legend states
projects/js-packages/charts/src/components/legend/legend.tsx	Passes chartId from context to BaseLegend
projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx	Filters hidden series; maintains original index for color/pattern consistency
projects/js-packages/charts/changelog/add-charts-54-legends-toggling-visibility-of-series	Adds 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/stories/legend-config.tsx

projects/js-packages/charts/src/components/legend/private/base-legend.tsx

projects/js-packages/charts/src/components/legend/private/base-legend.module.scss

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

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

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

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

projects/js-packages/charts/src/components/legend/private/base-legend.tsx

jp-launch-control · 2025-10-15T12:35:30Z

Code Coverage Summary

Coverage changed in 3 files.

File	Coverage	Δ%
projects/js-packages/charts/src/components/legend/private/base-legend.tsx	40/40 (100.00%)	0.00%
projects/js-packages/charts/src/components/line-chart/line-chart.tsx	119/127 (93.70%)	0.31%
projects/js-packages/charts/src/providers/chart-context/global-charts-provider.tsx	72/72 (100.00%)	0.00%

Full summary · PHP report · JS report

kangzj · 2025-10-15T20:17:09Z

I think it'd be faster if we add this for one chart type. If it works well, we then could easily apply to other charts. What do you think>?

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

annacmc · 2025-10-17T10:47:09Z

I think it'd be faster if we add this for one chart type. If it works well, we then could easily apply to other charts. What do you think>?

Good point, thanks @Jasper - going to get this out for one chart type first.

Copilot

Pull Request Overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 5 comments.

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

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

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

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

projects/js-packages/charts/src/components/legend/legend.tsx

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

… story

kangzj · 2025-10-20T03:25:44Z

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

 			renderTooltip = renderDefaultTooltip,
 			withStartGlyphs = false,
 			withEndGlyphs = false,
+			interactive = false,


Would it be better if we rename it to something like legendInteractive?

yeah - I was just considering that :)

kangzj

This looks pretty good! I left some nitpicks inline, but generally looks good to ship and iterate 🚀

As an improvement point, we should properly show an empty state when all of the legends are off:

kangzj · 2025-10-20T03:38:18Z

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

+		// Filter out hidden series when using interactive legends, preserving original index
+		const visibleData = useMemo( () => {
+			if ( ! chartId || ! interactive ) {
+				return dataSorted.map( ( series, index ) => ( { series, originalIndex: index } ) );


Instead of using originalIndex, I wonder whether it might be easier if we add an isVisbile property to series. And in the loop starting L452, if a series is not visible, then we return null to skip it. With that, we wouldn't have to mess with originalIndex in there.

const visibleData = useMemo( () => { if ( ! chartId || ! interactive ) { return dataSorted; } return dataSorted .map( ( series, index ) => ( { series, isVisible: isSeriesVisible( chartId, series.label ) } ) ); }, [ dataSorted, chartId, isSeriesVisible, interactive ] );

kangzj · 2025-10-20T03:51:05Z

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


-							{ dataSorted.map( ( seriesData, index ) => {
+							{ visibleData.map( ( { series: seriesData, originalIndex } ) => {
 								const { color, lineStyles, glyph } = getElementStyles( {


if( !seriesData.isVisible ) { return null; }

annacmc · 2025-10-20T09:49:49Z

This looks pretty good! I left some nitpicks inline, but generally looks good to ship and iterate 🚀

Thanks for the feedback @kangzj really helpful! I've gone ahead and shipped this, then addressed all your comments in a followup PR here: #45545

annacmc added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] Needs Review This PR is ready for review. labels Oct 15, 2025

annacmc self-assigned this Oct 15, 2025

github-actions bot added [JS Package] Charts [Status] In Progress RNA labels Oct 15, 2025

annacmc requested a review from Copilot October 15, 2025 12:20

Copilot AI reviewed Oct 15, 2025

View reviewed changes

kangzj reviewed Oct 15, 2025

View reviewed changes

projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx Outdated Show resolved Hide resolved

annacmc force-pushed the add/charts-54-legends-toggling-visibility-of-series branch from 645fb70 to 346a4fb Compare October 17, 2025 10:51

annacmc added 6 commits October 17, 2025 22:03

Add series visibility methods to chart context types

fad4485

Implement series visibility state management in chart provider

b7e5ee3

Add interactive and chartId props to legend types

0d270a6

Pass chartId prop through to BaseLegend component

a857d58

Add CSS styles for interactive legend states

9c2aa05

Add click handlers and accessibility for interactive legends

4fe0b4b

annacmc force-pushed the add/charts-54-legends-toggling-visibility-of-series branch from 346a4fb to b4b45c1 Compare October 17, 2025 11:25

annacmc added 3 commits October 17, 2025 22:31

Filter hidden series in LineChart based on legend visibility

f3e6c28

Add interactive argType to legend Storybook configuration

c55d5c9

Add changelog entry for interactive legend feature

4cfde90

annacmc force-pushed the add/charts-54-legends-toggling-visibility-of-series branch from b4b45c1 to 4cfde90 Compare October 17, 2025 11:33

annacmc changed the title ~~Charts: Add interactive legend for toggling series visibility~~ Charts: Add interactive legend for toggling series visibility in LineCharts Oct 17, 2025

annacmc added 3 commits October 17, 2025 23:24

Fix CSS selector for inactive legend item strikethrough

294a38b

Fix TypeScript KeyboardEvent type import in legend

1fb1772

Update legend aria-label to use keyboard-inclusive wording

2bddf80

annacmc added 2 commits October 17, 2025 23:27

Add defensive copy in getHiddenSeries to prevent state mutation

5bf94ed

Wire interactive prop through chart components to Legend

db5da63

annacmc requested a review from Copilot October 17, 2025 12:40

Copilot AI reviewed Oct 17, 2025

View reviewed changes

annacmc added 2 commits October 20, 2025 09:39

Fix interactive legend filtering and scope to LineChart only

e49199f

Add tests for series visibility management

3b4cfa4

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

annacmc added 4 commits October 20, 2025 10:40

Add interactive legend test coverage for BaseLegend and LineChart

9cbfd3a

Fix TypeScript error by adding required withGradientFill prop to tests

a54623a

Add documentation for interactive legend feature

988602e

Add interactive prop to Legend API docs and create interactive legend…

340a2ec

… story

annacmc changed the title ~~Charts: Add interactive legend for toggling series visibility in LineCharts~~ Charts: Add interactive legend for toggling series visibility in LineChart Oct 20, 2025

annacmc marked this pull request as ready for review October 20, 2025 03:12

annacmc requested review from a team and kangzj October 20, 2025 03:12

kangzj reviewed Oct 20, 2025

View reviewed changes

kangzj approved these changes Oct 20, 2025

View reviewed changes

annacmc merged commit 2a6056a into trunk Oct 20, 2025
87 checks passed

annacmc deleted the add/charts-54-legends-toggling-visibility-of-series branch October 20, 2025 05:31

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

Charts: Add interactive legend for toggling series visibility in LineChart #45506

Charts: Add interactive legend for toggling series visibility in LineChart #45506

Conversation

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

Uh oh!

Proposed changes:

Implementation Details:

Test Coverage:

Documentation:

Other information:

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

Testing instructions:

Quick Start - Storybook Demo

Feature Requirements

Backward Compatibility Testing

Current Scope

Code Coverage

Uh oh!

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

Uh oh!

Uh oh!

github-actions bot commented Oct 15, 2025

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

kangzj commented Oct 15, 2025

Uh oh!

Uh oh!

annacmc commented Oct 17, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kangzj Oct 20, 2025

Choose a reason for hiding this comment

Uh oh!

annacmc Oct 20, 2025

Choose a reason for hiding this comment

Uh oh!

kangzj left a comment

Choose a reason for hiding this comment

Uh oh!

kangzj Oct 20, 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 Oct 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

annacmc commented Oct 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

annacmc commented Oct 15, 2025 •

edited

Loading

github-actions bot commented Oct 15, 2025 •

edited

Loading

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

edited

Loading

kangzj Oct 20, 2025 •

edited

Loading