@automattic/charts 2.0.1 → 3.1.0

package/src/components/legend/test/legend.test.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-no-bind */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useMemo } from 'react';
-import { SingleChartContext } from '../../../charts/private/single-chart-context';
+import { useEffect, useMemo } from 'react';
+import { ChartInstanceContext } from '../../../charts/private/chart-instance-context';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -473,9 +473,9 @@ describe( 'BaseLegend', () => {
 			return render(
 				<GlobalChartsProvider>
 					<ChartRegistrar chartType={ chartType } chartId={ chartId } />
-					<SingleChartContext.Provider value={ { chartId } }>
+					<ChartInstanceContext.Provider value={ { chartId } }>
 						<Legend shape={ explicitShape } />
-					</SingleChartContext.Provider>
+					</ChartInstanceContext.Provider>
 				</GlobalChartsProvider>
 			);
 		};
@@ -535,6 +535,7 @@ describe( 'BaseLegend', () => {
 			expect( legendItems ).toHaveLength( 2 );
 			expect( legendItems[ 0 ] ).toHaveAttribute( 'tabIndex', '0' );
 			expect( legendItems[ 0 ] ).toHaveAttribute( 'aria-pressed', 'true' );
+			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'handles click events to toggle visibility', async () => {
@@ -621,6 +622,24 @@ describe( 'BaseLegend', () => {
 			expect( buttons ).toHaveLength( 0 );
 		} );
 
+		it( 'uses chart-instance visibility before provider state', () => {
+			render(
+				<GlobalChartsProvider>
+					<ChartInstanceContext.Provider
+						value={ {
+							chartId: 'test-chart',
+							isSeriesVisible: label => label !== 'Item 1',
+						} }
+					>
+						<BaseLegend items={ defaultItems } chartId="test-chart" />
+					</ChartInstanceContext.Provider>
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.getByRole( 'listitem', { name: /Item 1.*hidden/ } ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Item 2' ) ).toBeInTheDocument();
+		} );
+
 		it( 'works without chartId but does not toggle', async () => {
 			const user = userEvent.setup();
 
@@ -754,4 +773,81 @@ describe( 'BaseLegend', () => {
 			expect( legendButton ).toHaveAttribute( 'aria-pressed', 'false' );
 		} );
 	} );
+
+	describe( 'Non-interactive legend reflects hidden state', () => {
+		const HiddenSeriesHarness = ( { interactive }: { interactive: boolean } ) => {
+			const context = useGlobalChartsContext();
+			useEffect( () => {
+				context.toggleSeriesVisibility( 'legend-a11y-chart', 'Series A' );
+				// eslint-disable-next-line react-hooks/exhaustive-deps
+			}, [] );
+			return (
+				<BaseLegend
+					chartId="legend-a11y-chart"
+					interactive={ interactive }
+					items={ [
+						{ label: 'Series A', value: '10', color: '#ff0000' },
+						{ label: 'Series B', value: '20', color: '#00ff00' },
+					] }
+				/>
+			);
+		};
+
+		it( 'marks a programmatically hidden series inactive on a non-interactive legend', () => {
+			render(
+				<GlobalChartsProvider>
+					<HiddenSeriesHarness interactive={ false } />
+				</GlobalChartsProvider>
+			);
+
+			const items = screen.getAllByTestId( 'legend-item' );
+			expect( items[ 0 ] ).toHaveClass( 'legend-item--inactive' );
+			expect( items[ 1 ] ).not.toHaveClass( 'legend-item--inactive' );
+		} );
+
+		it( 'does not make a non-interactive legend item operable', () => {
+			render(
+				<GlobalChartsProvider>
+					<HiddenSeriesHarness interactive={ false } />
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.queryAllByRole( 'button' ) ).toHaveLength( 0 );
+			const items = screen.getAllByTestId( 'legend-item' );
+			expect( items[ 0 ] ).not.toHaveAttribute( 'aria-pressed' );
+			expect( items[ 0 ] ).not.toHaveAttribute( 'tabindex' );
+			expect( items[ 0 ] ).toHaveAttribute( 'role', 'listitem' );
+		} );
+
+		it( 'names the hidden state accessibly on a non-interactive legend', () => {
+			render(
+				<GlobalChartsProvider>
+					<HiddenSeriesHarness interactive={ false } />
+				</GlobalChartsProvider>
+			);
+
+			const items = screen.getAllByTestId( 'legend-item' );
+			expect( items[ 0 ] ).toHaveAttribute( 'aria-label', 'Series A, 10: hidden' );
+			expect( items[ 1 ] ).not.toHaveAttribute( 'aria-label' );
+		} );
+
+		it( 'includes the item value in interactive accessible names', () => {
+			render(
+				<GlobalChartsProvider>
+					<HiddenSeriesHarness interactive={ true } />
+				</GlobalChartsProvider>
+			);
+
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Series A, 10: hidden. Toggle visibility.',
+				} )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Series B, 20: visible. Toggle visibility.',
+				} )
+			).toBeInTheDocument();
+		} );
+	} );
 } );

package/src/components/tooltip/accessible-tooltip.tsx

@@ -1,5 +1,7 @@
 import { Tooltip, TooltipContext } from '@visx/xychart';
-import { useContext, useEffect, useCallback, useMemo } from 'react';
+import clsx from 'clsx';
+import { useContext, useEffect, useCallback, useMemo, useRef } from 'react';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import type { SeriesData, DataPointDate } from '../../types';
 import type { RenderTooltipParams, XyChartTooltipProps } from '../../visx/types';
 import type { ReactNode } from 'react';
@@ -77,13 +79,24 @@ export const AccessibleTooltip: React.FC< AccessibleTooltipProps > = ( {
 		return flattened;
 	}, [ series, mode ] );
 
+	// Tracks whether this effect opened a tooltip, so it only closes its own.
+	const hasKeyboardSelection = useRef( false );
+
 	// Handle tooltip highlighting for keyboard navigation
 	useEffect( () => {
 		if ( selectedIndex === undefined ) {
-			tooltipContext?.hideTooltip();
+			// visx debounces the hide and cancels only the most recently scheduled one,
+			// so hiding on every run leaves earlier hides pending. One of those lands
+			// mid-navigation and closes the tooltip the user is reading.
+			if ( hasKeyboardSelection.current ) {
+				hasKeyboardSelection.current = false;
+				tooltipContext?.hideTooltip();
+			}
 			return;
 		}
 
+		hasKeyboardSelection.current = true;
+
 		if ( mode === 'group' ) {
 			// Show all series at the selected data point index in single tooltip.
 			series.forEach( ( s, index ) => {
@@ -128,7 +141,7 @@ export const AccessibleTooltip: React.FC< AccessibleTooltipProps > = ( {
 						tabIndex={ -1 }
 						role="tooltip"
 						aria-atomic="true"
-						className={ keyboardFocusedClassName }
+						className={ clsx( CHART_SCOPE_CLASS, keyboardFocusedClassName ) }
 						data-testid={ `chart-tooltip-${ selectedIndex }` }
 						key={ `chart-tooltip-${ selectedIndex }` }
 					>
@@ -138,7 +151,7 @@ export const AccessibleTooltip: React.FC< AccessibleTooltipProps > = ( {
 			}
 
 			return (
-				<div role="tooltip" aria-live="polite">
+				<div className={ CHART_SCOPE_CLASS } role="tooltip" aria-live="polite">
 					{ tooltipContent }
 				</div>
 			);

package/src/components/tooltip/base-tooltip.tsx

@@ -1,4 +1,6 @@
 import { formatNumber } from '@automattic/number-formatters';
+import clsx from 'clsx';
+import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import styles from './base-tooltip.module.scss';
 import type { CSSProperties, ComponentType, ReactNode } from 'react';
 
@@ -57,13 +59,18 @@ export const BaseTooltip = ( {
 	renderContainer = true,
 }: BaseTooltipProps ) => {
 	const content = children || ( data && <Component data={ data } className={ className } /> );
+	const standaloneScopeClass = useStandaloneScopeClass();
 
 	if ( ! renderContainer ) {
 		return content;
 	}
 
 	return (
-		<div className={ styles.tooltip } style={ { top, left, ...style } } role="tooltip">
+		<div
+			className={ clsx( standaloneScopeClass, styles.tooltip ) }
+			style={ { top, left, ...style } }
+			role="tooltip"
+		>
 			{ content }
 		</div>
 	);

package/src/components/trend-indicator/test/trend-indicator.test.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../../providers/chart-context/global-charts-provider';
+import { CHART_SCOPE_CLASS } from '../../../styles/chart-scope-class';
 import { TrendIndicator } from '../trend-indicator';
 
 describe( 'TrendIndicator', () => {
@@ -79,6 +81,24 @@ describe( 'TrendIndicator', () => {
 		expect( container.firstChild ).toHaveStyle( { fontSize: '32px' } );
 	} );
 
+	describe( 'chart scope class', () => {
+		it( 'carries the scope class when rendered with no provider above it', () => {
+			render( <TrendIndicator direction="up" value="+10%" /> );
+
+			expect( screen.getByLabelText( 'Increase: +10%' ) ).toHaveClass( CHART_SCOPE_CLASS );
+		} );
+
+		it( 'does not carry the scope class when rendered inside a GlobalChartsProvider', () => {
+			render(
+				<GlobalChartsProvider>
+					<TrendIndicator direction="up" value="+10%" />
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.getByLabelText( 'Increase: +10%' ) ).not.toHaveClass( CHART_SCOPE_CLASS );
+		} );
+	} );
+
 	describe( 'accessibility', () => {
 		it( 'provides aria-label for up trend', () => {
 			const { container } = render( <TrendIndicator direction="up" value="+14%" /> );

package/src/components/trend-indicator/trend-indicator.module.scss

@@ -3,22 +3,19 @@
 	align-items: center;
 	gap: 0.125em;
 	font-size: var(--wpds-typography-font-size-md, 13px);
-	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 	line-height: 1;
 
-	// Trend colours use the --a8c-charts-color-trend-* catalog roles, falling back
-	// to the deprecated --charts-trend-*-color override API and then to the
-	// accessible WPDS semantic tokens.
 	&--up {
-		color: var(--a8c-charts-color-trend-up, var(--charts-trend-up-color, var(--wpds-color-foreground-content-success-weak, #008030)));
+		color: var(--a8c-charts-color-trend-up);
 	}
 
 	&--down {
-		color: var(--a8c-charts-color-trend-down, var(--charts-trend-down-color, var(--wpds-color-foreground-content-error-weak, #cc1818)));
+		color: var(--a8c-charts-color-trend-down);
 	}
 
 	&--neutral {
-		color: var(--a8c-charts-color-trend-neutral, var(--charts-trend-neutral-color, var(--wpds-color-foreground-content-neutral-weak, #707070)));
+		color: var(--a8c-charts-color-trend-neutral);
 	}
 
 	&__icon {

package/src/components/trend-indicator/trend-indicator.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import styles from './trend-indicator.module.scss';
 import type { TrendIndicatorProps, TrendDirection } from './types';
 
@@ -47,10 +48,12 @@ export function TrendIndicator( {
 	showIcon = true,
 }: TrendIndicatorProps ) {
 	const ariaLabel = `${ DIRECTION_LABELS[ direction ] }: ${ value }`;
+	const standaloneScopeClass = useStandaloneScopeClass();
 
 	return (
 		<span
 			className={ clsx(
+				standaloneScopeClass,
 				styles[ 'trend-indicator' ],
 				styles[ `trend-indicator--${ direction }` ],
 				className

package/src/hooks/index.ts

@@ -7,5 +7,5 @@ export { useElementSize } from './use-element-size';
 export { useTextTruncation } from './use-text-truncation';
 export { useZeroValueDisplay } from './use-zero-value-display';
 export { useDataWithPercentages } from './use-data-with-percentages';
-export { useInteractiveLegendData } from './use-interactive-legend-data';
+export { useLegendVisibilityData } from './use-legend-visibility-data';
 export { usePrefersReducedMotion } from './use-prefers-reduced-motion';

package/src/hooks/test/use-xychart-theme-provider-override.test.tsx

@@ -0,0 +1,28 @@
+import { renderHook } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../providers/chart-context/global-charts-provider';
+import { ChartScopeContext } from '../../providers/chart-scope';
+import { useXYChartTheme } from '../use-xychart-theme';
+import type { ReactNode } from 'react';
+
+// A `theme` prop override reaches CSS-painted elements through the inline `--a8c-charts-*` var GlobalChartsProvider writes on its wrapper, and reaches visx (SVG presentation attributes) through `providerTheme`. Before the fix, `providerTheme` carried the override's literal directly, so an element-level `--a8c-charts-color-grid` override set inside the provider tree had no effect on the JS-resolved value — the two paths could disagree. After the fix, `providerTheme` carries the catalog pointer for an overridden role, so both paths resolve through the same CSS cascade and the nearer element wins.
+describe( 'useXYChartTheme resolves a theme prop override through the CSS cascade', () => {
+	it( "an element override set inside the provider tree beats the provider's theme prop literal", () => {
+		const nestedOverride = document.createElement( 'div' );
+		nestedOverride.style.setProperty( '--a8c-charts-color-grid', '#00ff00' );
+		document.body.appendChild( nestedOverride );
+
+		const wrapper = ( { children }: { children: ReactNode } ) => (
+			<GlobalChartsProvider theme={ { gridStyles: { stroke: 'rgb(255,0,0)' } } }>
+				<ChartScopeContext.Provider value={ nestedOverride }>
+					{ children }
+				</ChartScopeContext.Provider>
+			</GlobalChartsProvider>
+		);
+
+		const { result } = renderHook( () => useXYChartTheme( [] ), { wrapper } );
+
+		expect( result.current.gridStyles.stroke ).toBe( '#00ff00' );
+
+		document.body.removeChild( nestedOverride );
+	} );
+} );

package/src/hooks/test/use-xychart-theme-style-reads.test.tsx

@@ -1,35 +1,41 @@
 import { renderHook } from '@testing-library/react';
+import { ChartScopeContext } from '../../providers/chart-scope';
 import { useXYChartTheme } from '../use-xychart-theme';
 import type { SeriesData } from '../../types';
+import type { ReactNode } from 'react';
 
-// The theme resolves five catalog roles — background, grid, axis, tick and axis label. Each `getComputedStyle` call can force the browser to flush pending style, and this memo re-runs whenever `data` changes identity, so a dashboard mounting N charts pays the count below N times over.
+// The theme resolves five catalog roles — background, grid, axis, tick and axis label. Each `getComputedStyle` call can force the browser to flush pending style, and this memo re-runs only when the scope element attaches or a series colour changes, so a dashboard mounting N charts pays the count below N times over.
 const STABLE_DATA: SeriesData[] = [];
 
 describe( 'useXYChartTheme style reads', () => {
+	let scope: HTMLElement;
 	let getComputedStyleSpy: jest.SpyInstance;
 
 	beforeEach( () => {
-		document.documentElement.style.setProperty( '--a8c-charts-color-grid', '#00ff00' );
+		scope = document.createElement( 'div' );
+		scope.style.setProperty( '--a8c-charts-color-grid', '#00ff00' );
+		document.body.appendChild( scope );
 		getComputedStyleSpy = jest.spyOn( window, 'getComputedStyle' );
 	} );
 
 	afterEach( () => {
 		getComputedStyleSpy.mockRestore();
-		document.documentElement.style.removeProperty( '--a8c-charts-color-grid' );
-		document.documentElement.style.removeProperty( '--a8c-charts-color-background' );
-		document.documentElement.style.removeProperty( '--a8c-charts-color-axis' );
+		scope.remove();
 	} );
 
-	const renderTheme = ( data: SeriesData[] = STABLE_DATA ) =>
+	const renderWithScope = ( data: SeriesData[] = STABLE_DATA ) =>
 		renderHook( ( { series }: { series: SeriesData[] } ) => useXYChartTheme( series ), {
 			initialProps: { series: data },
+			wrapper: ( { children }: { children: ReactNode } ) => (
+				<ChartScopeContext.Provider value={ scope }>{ children }</ChartScopeContext.Provider>
+			),
 		} );
 
 	it( 'reads every role from one computed-style snapshot, not one per role', () => {
-		document.documentElement.style.setProperty( '--a8c-charts-color-background', '#111111' );
-		document.documentElement.style.setProperty( '--a8c-charts-color-axis', '#222222' );
+		scope.style.setProperty( '--a8c-charts-color-background', '#111111' );
+		scope.style.setProperty( '--a8c-charts-color-axis', '#222222' );
 
-		const { result } = renderTheme();
+		const { result } = renderWithScope();
 
 		expect( getComputedStyleSpy ).toHaveBeenCalledTimes( 1 );
 		expect( result.current.backgroundColor ).toBe( '#111111' );
@@ -38,7 +44,7 @@ describe( 'useXYChartTheme style reads', () => {
 	} );
 
 	it( 'does not re-read styles when the hook re-renders with the same inputs', () => {
-		const { rerender } = renderTheme();
+		const { rerender } = renderWithScope();
 
 		getComputedStyleSpy.mockClear();
 		rerender( { series: STABLE_DATA } );
@@ -48,7 +54,7 @@ describe( 'useXYChartTheme style reads', () => {
 
 	// A caller passing an inline array literal — `<LineChart data={ [ … ] } />` — hands the hook a new array identity on every render. The memo keys on the series strokes instead, so the theme is not rebuilt and no style is read. Keyed on `data` this cost one query per render, and before the roles shared a snapshot it cost five.
 	it( 'does not rebuild when the caller passes a fresh data array of the same strokes', () => {
-		const { rerender } = renderTheme( [] );
+		const { rerender } = renderWithScope( [] );
 
 		getComputedStyleSpy.mockClear();
 		rerender( { series: [] } );
@@ -59,7 +65,7 @@ describe( 'useXYChartTheme style reads', () => {
 	it( 'rebuilds when a series stroke actually changes', () => {
 		const withStroke = ( stroke: string ) =>
 			[ { label: 'A', options: { stroke }, data: [] } ] as unknown as SeriesData[];
-		const { result, rerender } = renderTheme( withStroke( 'rgba(0, 0, 0, 0.5)' ) );
+		const { result, rerender } = renderWithScope( withStroke( 'rgba(0, 0, 0, 0.5)' ) );
 
 		getComputedStyleSpy.mockClear();
 		rerender( { series: withStroke( 'rebeccapurple' ) } );
@@ -70,7 +76,7 @@ describe( 'useXYChartTheme style reads', () => {
 
 	// The memo key serialises the strokes rather than joining them, so a colour containing a comma or a space survives the round-trip intact.
 	it( 'keeps a stroke that contains separators intact', () => {
-		const { result } = renderTheme( [
+		const { result } = renderWithScope( [
 			{ label: 'A', options: { stroke: 'rgba(0, 0, 0, 0.5)' }, data: [] },
 			{ label: 'B', options: { stroke: 'var(--brand, #fff)' }, data: [] },
 		] as unknown as SeriesData[] );

package/src/hooks/test/use-xychart-theme.test.tsx

@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react';
+import { ChartScopeContext } from '../../providers/chart-scope';
+import { useXYChartTheme } from '../use-xychart-theme';
+import type { ReactNode } from 'react';
+
+describe( 'useXYChartTheme', () => {
+	it( 'resolves grid colour against the scope element, not the document root', () => {
+		document.documentElement.style.setProperty( '--a8c-charts-color-grid', '#ff0000' );
+
+		const scope = document.createElement( 'div' );
+		scope.style.setProperty( '--a8c-charts-color-grid', '#00ff00' );
+		document.body.appendChild( scope );
+
+		const wrapper = ( { children }: { children: ReactNode } ) => (
+			<ChartScopeContext.Provider value={ scope }>{ children }</ChartScopeContext.Provider>
+		);
+
+		const { result } = renderHook( () => useXYChartTheme( [] ), { wrapper } );
+
+		expect( result.current.gridStyles.stroke ).toBe( '#00ff00' );
+
+		document.documentElement.style.removeProperty( '--a8c-charts-color-grid' );
+		document.body.removeChild( scope );
+	} );
+} );

package/src/hooks/{use-interactive-legend-data.ts → use-legend-visibility-data.ts}

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 /**
- * Data point interface for charts with interactive legends.
+ * Data point interface for charts with visibility-aware legends.
  * Requires label for series identification, value for calculations,
  * and percentage (should be pre-calculated by the chart component).
  */
@@ -12,23 +12,21 @@ interface DataPointWithPercentage {
 }
 
 /**
- * Parameters for the useInteractiveLegendData hook.
+ * Parameters for the useLegendVisibilityData hook.
  */
-interface UseInteractiveLegendDataParams< T extends DataPointWithPercentage > {
+interface UseLegendVisibilityDataParams< T extends DataPointWithPercentage > {
 	/** The chart data with pre-calculated percentages */
 	data: T[];
-	/** Unique chart identifier, required for interactive legends */
+	/** Unique chart identifier, required for filtering */
 	chartId: string | undefined;
-	/** Whether interactive legend filtering is enabled */
-	legendInteractive: boolean;
 	/** Function to check if a series is visible in the legend */
 	isSeriesVisible: ( chartId: string, label: string ) => boolean;
 }
 
 /**
- * Return value from the useInteractiveLegendData hook.
+ * Return value from the useLegendVisibilityData hook.
  */
-interface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {
+interface UseLegendVisibilityDataResult< T extends DataPointWithPercentage > {
 	/** Filtered data array containing only visible segments with recalculated percentages */
 	visibleData: T[];
 	/** Boolean indicating if all segments are hidden */
@@ -42,10 +40,10 @@ interface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {
 }
 
 /**
- * Custom hook to filter and recalculate chart data for interactive legends.
+ * Custom hook to filter and recalculate chart data based on series visibility.
  *
- * When interactive legends are enabled, this hook:
- * 1. Filters data to show only visible series based on legend selection
+ * Regardless of whether the legend is interactive (clickable), this hook:
+ * 1. Filters data to show only visible series (visibility can also be set programmatically)
  * 2. Recalculates percentages so visible segments total 100%
  * 3. Tracks whether all segments are hidden to show empty state
  *
@@ -54,10 +52,9 @@ interface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {
  *
  * @example
  * ```tsx
- * const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
+ * const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
  *   data: chartData,
  *   chartId: 'my-pie-chart',
- *   legendInteractive: true,
  *   isSeriesVisible: (id, label) => context.isSeriesVisible(id, label),
  * });
  *
@@ -72,24 +69,24 @@ interface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {
  * return <PieChart data={visibleData} />;
  * ```
  *
- * @param params                   - Configuration object for the hook
- * @param params.data              - The chart data to filter
- * @param params.chartId           - Unique identifier for the chart (required for interactive mode)
- * @param params.legendInteractive - Whether to enable interactive filtering
- * @param params.isSeriesVisible   - Function to check series visibility
+ * @param params                 - Configuration object for the hook
+ * @param params.data            - The chart data to filter
+ * @param params.chartId         - Unique identifier for the chart (required for filtering)
+ * @param params.isSeriesVisible - Function to check series visibility
  * @return Object containing visibleData, allSegmentsHidden flag, and legendData with recalculated percentages
  */
-export const useInteractiveLegendData = < T extends DataPointWithPercentage >( {
+export const useLegendVisibilityData = < T extends DataPointWithPercentage >( {
 	data,
 	chartId,
-	legendInteractive,
 	isSeriesVisible,
-}: UseInteractiveLegendDataParams< T > ): UseInteractiveLegendDataResult< T > => {
-	// Filter and recalculate data for interactive legends
+}: UseLegendVisibilityDataParams< T > ): UseLegendVisibilityDataResult< T > => {
+	// Filter and recalculate data based on shared legend visibility state.
 	// Note: data should already have percentages calculated by the chart component
 	const visibleData = useMemo( () => {
-		// If interactive mode is disabled or no chartId, return data as-is
-		if ( ! chartId || ! legendInteractive ) {
+		// Visibility filtering applies regardless of whether the legend is
+		// interactive: interactivity only controls whether clicking the legend
+		// can change visibility, not whether the chart honors it.
+		if ( ! chartId ) {
 			return data;
 		}
 
@@ -107,18 +104,20 @@ export const useInteractiveLegendData = < T extends DataPointWithPercentage >( {
 			...segment,
 			percentage: totalValue > 0 ? ( segment.value / totalValue ) * 100 : 0,
 		} ) );
-	}, [ data, chartId, isSeriesVisible, legendInteractive ] );
+	}, [ data, chartId, isSeriesVisible ] );
 
-	// Check if all segments are hidden (only relevant in interactive mode)
+	// Check if all segments are hidden. Guard on the source data being non-empty:
+	// unlike line/area's `.every()`, an empty `visibleData` alone can't distinguish
+	// "everything was hidden" from "there was nothing to show" for an empty dataset.
 	const allSegmentsHidden = useMemo( () => {
-		return legendInteractive && visibleData.length === 0;
-	}, [ legendInteractive, visibleData ] );
+		return visibleData.length === 0 && data.length > 0;
+	}, [ visibleData, data ] );
 
 	// Prepare legend data with percentages
 	// Hidden items keep their original percentage (calculated from all values)
 	// Visible items show recalculated percentages (totaling 100%)
 	const legendData = useMemo( () => {
-		if ( ! legendInteractive || ! chartId ) {
+		if ( ! chartId ) {
 			return data;
 		}
 
@@ -135,7 +134,7 @@ export const useInteractiveLegendData = < T extends DataPointWithPercentage >( {
 			// For visible items, get the recalculated percentage from visibleData
 			return visibleDataMap.get( segment.label ) || segment;
 		} );
-	}, [ data, visibleData, legendInteractive, chartId, isSeriesVisible ] );
+	}, [ data, visibleData, chartId, isSeriesVisible ] );
 
 	return { visibleData, allSegmentsHidden, legendData };
 };

package/src/hooks/use-xychart-theme.ts

@@ -1,11 +1,13 @@
 import { buildChartTheme } from '@visx/xychart';
 import { useMemo } from 'react';
 import { useGlobalChartsTheme } from '../providers';
+import { useChartScopeElement } from '../providers/chart-scope';
 import { createCssVariableResolver } from '../utils';
 import type { SeriesData } from '../types';
 
 export const useXYChartTheme = ( data: SeriesData[] ) => {
 	const theme = useGlobalChartsTheme();
+	const scopeElement = useChartScopeElement();
 
 	// The only thing the theme takes from `data` is the series strokes, so key the memo on those rather than on the array's identity. A caller passing an inline literal — `<LineChart data={ [ … ] } />`, which the stories and several consumers do — otherwise rebuilds the whole theme on every render. Serialised rather than joined: a stroke can be `rgba(0, 0, 0, 0.5)` or `var(--brand, #fff)`, and any separator that reads naturally inside a colour cannot round-trip.
 	const seriesColorKey = JSON.stringify(
@@ -15,10 +17,10 @@ export const useXYChartTheme = ( data: SeriesData[] ) => {
 	);
 
 	return useMemo( () => {
-		// visx applies grid, axis, and tick-label colors as SVG presentation attributes, where CSS var() cannot resolve. Resolve them to concrete values before handing the theme to buildChartTheme.
+		// visx applies grid, axis, and tick-label colours as SVG presentation attributes, where CSS var() cannot resolve. Resolve the catalog token against the chart's own scope element — never :root — so this reads any override set inside the provider tree, the same one a CSS-painted element would inherit.
 		//
-		// One resolver per theme build, so the five roles below share a single getComputedStyle call rather than taking one each.
-		const resolve = createCssVariableResolver();
+		// One resolver per theme build, so the five roles below share a single getComputedStyle call rather than taking one each: this memo re-runs only when the scope element attaches or a series colour changes, which for a dashboard of charts is the difference between two style queries per chart and ten.
+		const resolve = createCssVariableResolver( scopeElement );
 		const resolveColor = ( value?: string ): string | undefined =>
 			value ? resolve( value ) ?? value : value;
 
@@ -45,5 +47,5 @@ export const useXYChartTheme = ( data: SeriesData[] ) => {
 				fill: resolveColor( theme.svgLabelSmall.fill ),
 			},
 		} );
-	}, [ theme, seriesColorKey ] );
+	}, [ theme, seriesColorKey, scopeElement ] );
 };

package/src/index.ts

@@ -4,6 +4,8 @@ export { BarChart, BarChartUnresponsive } from './charts/bar-chart';
 export { BarListChart, BarListChartUnresponsive } from './charts/bar-list-chart';
 export { ConversionFunnelChart } from './charts/conversion-funnel-chart';
 export { GeoChart, GeoChartUnresponsive } from './charts/geo-chart';
+// A value export, not a type: building a tooltip column header needs the enum member itself.
+export { GoogleDataTableColumnRoleType } from './types';
 export {
 	HeatmapChart,
 	HeatmapChartUnresponsive,
@@ -32,6 +34,8 @@ export {
 	useGlobalChartsTheme,
 	GlobalChartsContext,
 	defaultTheme,
+	useChartScopeElement,
+	useChartRegistration,
 } from './providers';
 
 // Types - explicit exports (excludes internal types like DataPointPercentageCalculated)
@@ -59,10 +63,9 @@ export type {
 	LegendPosition,
 	ChartLegendConfig,
 	SeriesChartLegendConfig,
+	SeriesVisibilityProps,
 	BaseChartProps,
-	GridProps,
 	GoogleDataTableColumn,
-	GoogleDataTableColumnRoleType,
 	GoogleDataTableRow,
 	LegendShape,
 	LegendShapeLabel,
@@ -122,6 +125,12 @@ export type { ArcData } from './charts/pie-semi-circle-chart';
 export type { SparklineProps, GradientConfig, SparklineDataPoint } from './charts/sparkline';
 
 // Utilities
-export { parseAsLocalDate, formatMetricValue, formatPercentage, mergeThemes } from './utils';
+export {
+	parseAsLocalDate,
+	formatMetricValue,
+	formatPercentage,
+	mergeThemes,
+	resolveCssVariable,
+} from './utils';
 export * from './utils/color-utils';
 export type { MetricValueType } from './utils';