@automattic/charts 3.0.0 → 3.1.1

package/src/providers/chart-context/global-charts-provider.tsx

@@ -44,6 +44,10 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { childre
 	const [ hiddenSeries, setHiddenSeries ] = useState< Map< string, Set< string > > >(
 		() => new Map()
 	);
+	// Which charts have had their defaults seeded. Kept apart from `hiddenSeries`
+	// because that map drops a chart's entry once its hidden set empties, so an
+	// absent entry cannot tell "never seeded" from "the reader revealed the lot".
+	const seededCharts = useRef< Set< string > >( new Set() );
 
 	// Ref to the wrapper element for resolving scoped CSS variables
 	const wrapperRef = useRef< HTMLDivElement >( null );
@@ -242,28 +246,90 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { childre
 		[ providerTheme, resolveColor ]
 	);
 
-	// Series visibility management methods
-	const toggleSeriesVisibility = useCallback( ( chartId: string, seriesLabel: string ) => {
-		setHiddenSeries( prev => {
-			const newMap = new Map( prev );
-			const chartHidden = newMap.get( chartId ) || new Set();
-			const newSet = new Set( chartHidden );
+	// Keep hidden-series updates and no-op detection consistent across setters.
+	const updateHiddenSeries = useCallback(
+		( chartId: string, update: ( current: Set< string > ) => Set< string > ) => {
+			setHiddenSeries( prev => {
+				const current = prev.get( chartId );
+				const next = update( new Set( current ?? [] ) );
 
-			if ( newSet.has( seriesLabel ) ) {
-				newSet.delete( seriesLabel );
-			} else {
-				newSet.add( seriesLabel );
-			}
+				if ( ! current && next.size === 0 ) {
+					return prev;
+				}
+
+				// Preserve identity for no-op updates.
+				if (
+					current &&
+					current.size === next.size &&
+					[ ...next ].every( label => current.has( label ) )
+				) {
+					return prev;
+				}
+
+				const newMap = new Map( prev );
+				if ( next.size === 0 ) {
+					newMap.delete( chartId );
+				} else {
+					newMap.set( chartId, next );
+				}
+
+				return newMap;
+			} );
+		},
+		[]
+	);
+
+	const toggleSeriesVisibility = useCallback(
+		( chartId: string, seriesLabel: string ) => {
+			updateHiddenSeries( chartId, current => {
+				if ( current.has( seriesLabel ) ) {
+					current.delete( seriesLabel );
+				} else {
+					current.add( seriesLabel );
+				}
+				return current;
+			} );
+		},
+		[ updateHiddenSeries ]
+	);
 
-			if ( newSet.size === 0 ) {
-				newMap.delete( chartId );
-			} else {
-				newMap.set( chartId, newSet );
+	const setSeriesVisibility = useCallback(
+		( chartId: string, seriesLabel: string, visible: boolean ) => {
+			updateHiddenSeries( chartId, current => {
+				if ( visible ) {
+					current.delete( seriesLabel );
+				} else {
+					current.add( seriesLabel );
+				}
+				return current;
+			} );
+		},
+		[ updateHiddenSeries ]
+	);
+
+	const setChartHiddenSeries = useCallback(
+		( chartId: string, seriesLabels: readonly string[] ) => {
+			updateHiddenSeries( chartId, () => new Set( seriesLabels ) );
+		},
+		[ updateHiddenSeries ]
+	);
+
+	const hasSeededChart = useCallback(
+		( chartId: string ) => seededCharts.current.has( chartId ),
+		[]
+	);
+
+	const seedChartHiddenSeries = useCallback(
+		( chartId: string, seriesLabels: readonly string[] ) => {
+			if ( seededCharts.current.has( chartId ) ) {
+				return;
 			}
 
-			return newMap;
-		} );
-	}, [] );
+			seededCharts.current.add( chartId );
+			setChartHiddenSeries( chartId, seriesLabels );
+		},
+		[ setChartHiddenSeries ]
+	);
 
 	const isSeriesVisible = useCallback(
 		( chartId: string, seriesLabel: string ) => {
@@ -290,6 +356,10 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { childre
 			theme: providerTheme,
 			getElementStyles,
 			toggleSeriesVisibility,
+			setSeriesVisibility,
+			setChartHiddenSeries,
+			seedChartHiddenSeries,
+			hasSeededChart,
 			isSeriesVisible,
 			getHiddenSeries,
 			isColorPaletteResolved,
@@ -302,6 +372,10 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { childre
 			providerTheme,
 			getElementStyles,
 			toggleSeriesVisibility,
+			setSeriesVisibility,
+			setChartHiddenSeries,
+			seedChartHiddenSeries,
+			hasSeededChart,
 			isSeriesVisible,
 			getHiddenSeries,
 			isColorPaletteResolved,

package/src/providers/chart-context/hooks/use-default-hidden-series.ts

@@ -0,0 +1,47 @@
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useGlobalChartsContext } from './use-global-charts-context';
+
+// Hide seeded series before paint without triggering React's SSR warning.
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+/**
+ * Seeds a chart's hidden series once per chart ID, the first time the provider
+ * sees that ID.
+ *
+ * The provider owns the record of what has been seeded, not this hook: a
+ * mount-scoped one would re-apply the defaults on every remount, and a chart
+ * remounts for reasons the reader never thinks of as a new chart — switching
+ * between line and bar, tabbing away and back, a resize flipping tabs into a
+ * dropdown. Each of those would throw away the series they had just revealed.
+ *
+ * @param chartId      - The chart ID passed to the provider's visibility methods.
+ * @param seriesLabels - Labels to hide when this chart ID is first seen. Later values are ignored.
+ * @return The resolved hidden-series set.
+ */
+export const useDefaultHiddenSeries = (
+	chartId: string,
+	seriesLabels?: readonly string[]
+): Set< string > => {
+	const { getHiddenSeries, seedChartHiddenSeries, hasSeededChart } = useGlobalChartsContext();
+	// Read through a ref so the effect never depends on a new array identity.
+	const labelsRef = useRef( seriesLabels );
+	labelsRef.current = seriesLabels;
+	const hasSeriesLabels = seriesLabels !== undefined;
+	const shouldUseDefaults = hasSeriesLabels && ! hasSeededChart( chartId );
+
+	useIsomorphicLayoutEffect( () => {
+		if ( labelsRef.current === undefined ) {
+			return;
+		}
+		seedChartHiddenSeries( chartId, labelsRef.current );
+	}, [ chartId, hasSeriesLabels, seedChartHiddenSeries ] );
+
+	// getHiddenSeries hands out a fresh copy per call, so hold the set still between
+	// visibility changes. Charts derive their rendered series from it, and a new
+	// identity every render invalidates every memo downstream — including the one
+	// the accessible tooltip watches, which closes a tooltip mid-navigation.
+	return useMemo(
+		() => ( shouldUseDefaults ? new Set( labelsRef.current ) : getHiddenSeries( chartId ) ),
+		[ shouldUseDefaults, getHiddenSeries, chartId ]
+	);
+};

package/src/providers/chart-context/test/chart-context.test.tsx

@@ -1728,6 +1728,148 @@ describe( 'ChartContext', () => {
 			// Should have empty set after all series are visible
 			expect( hidden.size ).toBe( 0 );
 		} );
+
+		it( 'setSeriesVisibility sets state absolutely rather than toggling', () => {
+			let contextValue: GlobalChartsContextValue;
+			const TestComponent = () => {
+				contextValue = useGlobalChartsContext();
+				return <div>Test</div>;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			act( () => {
+				contextValue.setSeriesVisibility( 'test-chart', 'Series 1', false );
+			} );
+			expect( contextValue.isSeriesVisible( 'test-chart', 'Series 1' ) ).toBe( false );
+
+			// Calling it again with the same value must not flip it back.
+			act( () => {
+				contextValue.setSeriesVisibility( 'test-chart', 'Series 1', false );
+			} );
+			expect( contextValue.isSeriesVisible( 'test-chart', 'Series 1' ) ).toBe( false );
+
+			act( () => {
+				contextValue.setSeriesVisibility( 'test-chart', 'Series 1', true );
+			} );
+			expect( contextValue.isSeriesVisible( 'test-chart', 'Series 1' ) ).toBe( true );
+		} );
+
+		it( 'setChartHiddenSeries replaces the hidden set rather than merging into it', () => {
+			let contextValue: GlobalChartsContextValue;
+			const TestComponent = () => {
+				contextValue = useGlobalChartsContext();
+				return <div>Test</div>;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			act( () => {
+				contextValue.setChartHiddenSeries( 'test-chart', [ 'Series 1', 'Series 2' ] );
+			} );
+			expect( contextValue.getHiddenSeries( 'test-chart' ) ).toEqual(
+				new Set( [ 'Series 1', 'Series 2' ] )
+			);
+
+			act( () => {
+				contextValue.setChartHiddenSeries( 'test-chart', [ 'Series 2' ] );
+			} );
+			expect( contextValue.isSeriesVisible( 'test-chart', 'Series 1' ) ).toBe( true );
+			expect( contextValue.isSeriesVisible( 'test-chart', 'Series 2' ) ).toBe( false );
+
+			act( () => {
+				contextValue.setChartHiddenSeries( 'test-chart', [] );
+			} );
+			expect( contextValue.getHiddenSeries( 'test-chart' ) ).toEqual( new Set() );
+		} );
+
+		it( 'setChartHiddenSeries leaves other charts alone', () => {
+			let contextValue: GlobalChartsContextValue;
+			const TestComponent = () => {
+				contextValue = useGlobalChartsContext();
+				return <div>Test</div>;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			act( () => {
+				contextValue.setChartHiddenSeries( 'chart-a', [ 'Series 1' ] );
+				contextValue.setChartHiddenSeries( 'chart-b', [ 'Series 2' ] );
+			} );
+
+			expect( contextValue.isSeriesVisible( 'chart-a', 'Series 1' ) ).toBe( false );
+			expect( contextValue.isSeriesVisible( 'chart-a', 'Series 2' ) ).toBe( true );
+			expect( contextValue.isSeriesVisible( 'chart-b', 'Series 2' ) ).toBe( false );
+		} );
+
+		it( 'a redundant setSeriesVisibility write does not change context identity or re-render', () => {
+			let contextValue: GlobalChartsContextValue;
+			let childUpdateTally = 0;
+			const TestComponent = () => {
+				contextValue = useGlobalChartsContext();
+				childUpdateTally++;
+				return <div>Test</div>;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			act( () => {
+				contextValue.setSeriesVisibility( 'test-chart', 'Series 1', false );
+			} );
+			const isSeriesVisibleAfterFirstWrite = contextValue.isSeriesVisible;
+			const tallyAfterFirstWrite = childUpdateTally;
+
+			// Redundant write: the series is already hidden, so this must be a no-op.
+			act( () => {
+				contextValue.setSeriesVisibility( 'test-chart', 'Series 1', false );
+			} );
+
+			expect( contextValue.isSeriesVisible ).toBe( isSeriesVisibleAfterFirstWrite );
+			expect( childUpdateTally ).toBe( tallyAfterFirstWrite );
+		} );
+
+		it( 'setting an already-empty hidden set does not create then delete a Map entry', () => {
+			let contextValue: GlobalChartsContextValue;
+			let childUpdateTally = 0;
+			const TestComponent = () => {
+				contextValue = useGlobalChartsContext();
+				childUpdateTally++;
+				return <div>Test</div>;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			const tallyBeforeWrite = childUpdateTally;
+			const isSeriesVisibleBefore = contextValue.isSeriesVisible;
+
+			// This chart has no hidden-series entry at all yet.
+			act( () => {
+				contextValue.setChartHiddenSeries( 'test-chart', [] );
+			} );
+
+			expect( childUpdateTally ).toBe( tallyBeforeWrite );
+			expect( contextValue.isSeriesVisible ).toBe( isSeriesVisibleBefore );
+		} );
 	} );
 
 	describe( 'GlobalChartsProvider - CSS Variable Support', () => {

package/src/providers/chart-context/test/use-default-hidden-series-paint.test.tsx

@@ -0,0 +1,56 @@
+import { screen } from '@testing-library/react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { GlobalChartsProvider } from '../global-charts-provider';
+import { useDefaultHiddenSeries } from '../hooks/use-default-hidden-series';
+import { useGlobalChartsContext } from '../hooks/use-global-charts-context';
+import type { Root } from 'react-dom/client';
+
+describe( 'useDefaultHiddenSeries paint timing', () => {
+	let host: HTMLDivElement;
+	let root: Root;
+	let previousActEnvironment: boolean | undefined;
+
+	beforeEach( () => {
+		previousActEnvironment = globalThis.IS_REACT_ACT_ENVIRONMENT;
+		globalThis.IS_REACT_ACT_ENVIRONMENT = false;
+		host = document.createElement( 'div' );
+		document.body.appendChild( host );
+		root = createRoot( host );
+	} );
+
+	afterEach( () => {
+		flushSync( () => root.unmount() );
+		host.remove();
+		globalThis.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment;
+	} );
+
+	it( 'updates provider visibility before the first paint', () => {
+		const Chart = () => {
+			useDefaultHiddenSeries( 'chart', [ 'Visitors' ] );
+			return null;
+		};
+
+		const Visibility = () => {
+			const { isSeriesVisible } = useGlobalChartsContext();
+			return (
+				<span data-testid="series-visibility">
+					{ isSeriesVisible( 'chart', 'Visitors' ) ? 'visible' : 'hidden' }
+				</span>
+			);
+		};
+
+		// flushSync lets us inspect the layout-effect result before a later passive
+		// effect could seed the provider.
+		flushSync( () => {
+			root.render(
+				<GlobalChartsProvider>
+					<Chart />
+					<Visibility />
+				</GlobalChartsProvider>
+			);
+		} );
+
+		expect( screen.getByTestId( 'series-visibility' ) ).toHaveTextContent( 'hidden' );
+	} );
+} );

package/src/providers/chart-context/test/use-default-hidden-series.ssr.test.tsx

@@ -0,0 +1,39 @@
+/** @jest-environment node */
+
+import { renderToStaticMarkup } from 'react-dom/server';
+import { useDefaultHiddenSeries } from '../hooks/use-default-hidden-series';
+
+const mockGetHiddenSeries = jest.fn( () => new Set( [ 'Provider hidden' ] ) );
+const mockSeedChartHiddenSeries = jest.fn();
+const mockHasSeededChart = jest.fn( () => false );
+
+jest.mock( '../hooks/use-global-charts-context', () => ( {
+	useGlobalChartsContext: () => ( {
+		getHiddenSeries: mockGetHiddenSeries,
+		seedChartHiddenSeries: mockSeedChartHiddenSeries,
+		hasSeededChart: mockHasSeededChart,
+	} ),
+} ) );
+
+describe( 'useDefaultHiddenSeries SSR', () => {
+	it( 'applies defaults to the server-rendered output before effects run', () => {
+		const Chart = () => {
+			const hiddenSeries = useDefaultHiddenSeries( 'chart', [ 'Visitors' ] );
+
+			return (
+				<>
+					{ [ 'Visitors', 'Views' ].map( label =>
+						! hiddenSeries.has( label ) ? <span key={ label }>{ label }</span> : null
+					) }
+				</>
+			);
+		};
+
+		const view = renderToStaticMarkup( <Chart /> );
+
+		expect( view ).not.toContain( 'Visitors' );
+		expect( view ).toContain( 'Views' );
+		expect( mockGetHiddenSeries ).not.toHaveBeenCalled();
+		expect( mockSeedChartHiddenSeries ).not.toHaveBeenCalled();
+	} );
+} );

package/src/providers/chart-context/test/use-default-hidden-series.test.tsx

@@ -0,0 +1,222 @@
+import { render, act } from '@testing-library/react';
+import { GlobalChartsProvider } from '../global-charts-provider';
+import { useDefaultHiddenSeries } from '../hooks/use-default-hidden-series';
+import { useGlobalChartsContext } from '../hooks/use-global-charts-context';
+import type { GlobalChartsContextValue } from '../types';
+
+describe( 'useDefaultHiddenSeries', () => {
+	let contextValue: GlobalChartsContextValue;
+	let resolvedHiddenSeries: Set< string >;
+
+	const Grab = () => {
+		contextValue = useGlobalChartsContext();
+		return null;
+	};
+
+	const Chart = ( { defaults, chartId = 'chart' }: { defaults?: string[]; chartId?: string } ) => {
+		resolvedHiddenSeries = useDefaultHiddenSeries( chartId, defaults );
+		return null;
+	};
+
+	it( 'hides the named series at mount', () => {
+		render(
+			<GlobalChartsProvider>
+				<Grab />
+				<Chart defaults={ [ 'Visitors' ] } />
+			</GlobalChartsProvider>
+		);
+
+		expect( contextValue.isSeriesVisible( 'chart', 'Visitors' ) ).toBe( false );
+		expect( contextValue.isSeriesVisible( 'chart', 'Views' ) ).toBe( true );
+	} );
+
+	it( 'writes nothing when no defaults are given', () => {
+		render(
+			<GlobalChartsProvider>
+				<Grab />
+				<Chart />
+			</GlobalChartsProvider>
+		);
+
+		expect( contextValue.getHiddenSeries( 'chart' ) ).toEqual( new Set() );
+	} );
+
+	it( 'reflects provider visibility changes after mount', () => {
+		render(
+			<GlobalChartsProvider>
+				<Grab />
+				<Chart />
+			</GlobalChartsProvider>
+		);
+
+		expect( resolvedHiddenSeries.has( 'Visitors' ) ).toBe( false );
+
+		act( () => {
+			contextValue.setSeriesVisibility( 'chart', 'Visitors', false );
+		} );
+
+		expect( resolvedHiddenSeries.has( 'Visitors' ) ).toBe( true );
+	} );
+
+	it( 'seeds the first defined value and ignores later values for the same chart ID', () => {
+		const Harness = ( { defaults }: { defaults?: string[] } ) => (
+			<GlobalChartsProvider>
+				<Grab />
+				<Chart defaults={ defaults } />
+			</GlobalChartsProvider>
+		);
+
+		const { rerender } = render( <Harness /> );
+
+		rerender( <Harness defaults={ [ 'Visitors' ] } /> );
+		expect( contextValue.getHiddenSeries( 'chart' ) ).toEqual( new Set( [ 'Visitors' ] ) );
+
+		rerender( <Harness defaults={ [ 'Views' ] } /> );
+		expect( contextValue.getHiddenSeries( 'chart' ) ).toEqual( new Set( [ 'Visitors' ] ) );
+	} );
+
+	it( 'treats an empty array as a defined default', () => {
+		const Harness = ( { defaults }: { defaults: string[] } ) => (
+			<GlobalChartsProvider>
+				<Grab />
+				<Chart defaults={ defaults } />
+			</GlobalChartsProvider>
+		);
+
+		const { rerender } = render( <Harness defaults={ [] } /> );
+
+		rerender( <Harness defaults={ [ 'Visitors' ] } /> );
+
+		expect( contextValue.getHiddenSeries( 'chart' ) ).toEqual( new Set() );
+	} );
+
+	it( 'does not re-hide a series the user revealed', () => {
+		const Harness = () => (
+			<GlobalChartsProvider>
+				<Grab />
+				<Chart defaults={ [ 'Visitors' ] } />
+			</GlobalChartsProvider>
+		);
+
+		const { rerender } = render( <Harness /> );
+
+		act( () => {
+			contextValue.setSeriesVisibility( 'chart', 'Visitors', true );
+		} );
+
+		rerender( <Harness /> );
+
+		expect( contextValue.isSeriesVisible( 'chart', 'Visitors' ) ).toBe( true );
+	} );
+
+	it( "keeps the reader's visibility choices across a remount", () => {
+		// The provider stays mounted; only the chart unmounts and comes back — a
+		// chart-type switch, a tab round-trip, a resize flipping tabs into a
+		// dropdown. None of those read as a new chart, so none may re-seed.
+		const Harness = ( { mounted }: { mounted: boolean } ) => (
+			<GlobalChartsProvider>
+				<Grab />
+				{ mounted && <Chart defaults={ [ 'Visitors' ] } /> }
+			</GlobalChartsProvider>
+		);
+
+		const { rerender } = render( <Harness mounted /> );
+
+		act( () => {
+			contextValue.setSeriesVisibility( 'chart', 'Views', false );
+		} );
+		expect( contextValue.isSeriesVisible( 'chart', 'Views' ) ).toBe( false );
+
+		rerender( <Harness mounted={ false } /> );
+		rerender( <Harness mounted /> );
+
+		expect( contextValue.isSeriesVisible( 'chart', 'Visitors' ) ).toBe( false );
+		expect( contextValue.isSeriesVisible( 'chart', 'Views' ) ).toBe( false );
+	} );
+
+	it( 'leaves a fully revealed chart revealed after a remount', () => {
+		// Revealing the last hidden series empties the chart's hidden set, and the
+		// provider drops the entry with it. The seeded record has to survive that,
+		// or the defaults come back the next time the chart mounts.
+		const Harness = ( { mounted }: { mounted: boolean } ) => (
+			<GlobalChartsProvider>
+				<Grab />
+				{ mounted && <Chart defaults={ [ 'Visitors' ] } /> }
+			</GlobalChartsProvider>
+		);
+
+		const { rerender } = render( <Harness mounted /> );
+
+		act( () => {
+			contextValue.setSeriesVisibility( 'chart', 'Visitors', true );
+		} );
+		expect( contextValue.getHiddenSeries( 'chart' ) ).toEqual( new Set() );
+
+		rerender( <Harness mounted={ false } /> );
+		rerender( <Harness mounted /> );
+
+		expect( contextValue.isSeriesVisible( 'chart', 'Visitors' ) ).toBe( true );
+	} );
+
+	it( 'retains provider visibility when remounted without defaults', () => {
+		const Harness = ( { defaults, mounted }: { defaults?: string[]; mounted: boolean } ) => (
+			<GlobalChartsProvider>
+				<Grab />
+				{ mounted && <Chart defaults={ defaults } /> }
+			</GlobalChartsProvider>
+		);
+
+		const { rerender } = render( <Harness defaults={ [ 'Visitors' ] } mounted /> );
+		expect( contextValue.isSeriesVisible( 'chart', 'Visitors' ) ).toBe( false );
+
+		rerender( <Harness mounted={ false } /> );
+		rerender( <Harness mounted /> );
+
+		expect( contextValue.isSeriesVisible( 'chart', 'Visitors' ) ).toBe( false );
+	} );
+
+	it( 'keeps the same set across renders until visibility changes', () => {
+		// Charts memoize their rendered series off this set. A fresh identity per
+		// render invalidates those memos, which re-runs the accessible tooltip's
+		// effect and closes a tooltip the user is still navigating with.
+		const Harness = () => (
+			<GlobalChartsProvider>
+				<Grab />
+				<Chart defaults={ [ 'Visitors' ] } />
+			</GlobalChartsProvider>
+		);
+
+		const { rerender } = render( <Harness /> );
+		const seeded = resolvedHiddenSeries;
+
+		rerender( <Harness /> );
+		expect( resolvedHiddenSeries ).toBe( seeded );
+
+		act( () => {
+			contextValue.setSeriesVisibility( 'chart', 'Views', false );
+		} );
+		expect( resolvedHiddenSeries ).not.toBe( seeded );
+	} );
+
+	it( 're-seeds the defaults when chartId changes mid-mount', () => {
+		// Same mount, only the chartId prop changes (e.g. <LineChart chartId={ metric } ... />
+		// with `metric` going 'views' -> 'clicks'), so the component never unmounts.
+		const Harness = ( { chartId }: { chartId: string } ) => (
+			<GlobalChartsProvider>
+				<Grab />
+				<Chart chartId={ chartId } defaults={ [ 'Visitors' ] } />
+			</GlobalChartsProvider>
+		);
+
+		const { rerender } = render( <Harness chartId="views" /> );
+
+		expect( contextValue.isSeriesVisible( 'views', 'Visitors' ) ).toBe( false );
+
+		rerender( <Harness chartId="clicks" /> );
+
+		// The new chart id gets the same declared defaults seeded...
+		expect( contextValue.isSeriesVisible( 'clicks', 'Visitors' ) ).toBe( false );
+		// ...and the old id's hidden set is left as it was, not silently cleared.
+		expect( contextValue.isSeriesVisible( 'views', 'Visitors' ) ).toBe( false );
+	} );
+} );

package/src/providers/chart-context/types.ts

@@ -38,8 +38,14 @@ export interface GlobalChartsContextValue {
 	getChartData: ( id: string ) => ChartRegistration | undefined;
 	theme: CompleteChartTheme;
 	getElementStyles: ( params: GetElementStylesParams ) => ElementStyles;
-	// Series visibility management for interactive legends
+	// Series visibility management shared by charts, legends, and programmatic controls.
 	toggleSeriesVisibility: ( chartId: string, seriesLabel: string ) => void;
+	setSeriesVisibility: ( chartId: string, seriesLabel: string, visible: boolean ) => void;
+	setChartHiddenSeries: ( chartId: string, seriesLabels: readonly string[] ) => void;
+	/** Applies a chart's defaults once. A no-op for a chart that has already been seeded. */
+	seedChartHiddenSeries: ( chartId: string, seriesLabels: readonly string[] ) => void;
+	/** Whether this chart's defaults have already been seeded, in this or an earlier mount. */
+	hasSeededChart: ( chartId: string ) => boolean;
 	isSeriesVisible: ( chartId: string, seriesLabel: string ) => boolean;
 	getHiddenSeries: ( chartId: string ) => Set< string >;
 	isColorPaletteResolved: boolean;

package/src/styles/chart-scope.scss

@@ -57,8 +57,8 @@
 	--a8c-charts-color-track: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
 	// Translucent dark surface; no WPDS token carries this.
 	--a8c-charts-color-tooltip-surface: rgb(0 0 0 / 85%);
-	--a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong, #3858e9);
-	--a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand, #3858e9);
+	--a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
+	--a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 
 	// @wordpress/theme 1.0.0 removed the whole --wpds-elevation-* group while the
 	// elevation model is redefined (gutenberg#80099). These carry the removed spec