@automattic/charts 3.0.0 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "3.0.0",
+	"version": "3.1.1",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

package/src/charts/area-chart/area-chart.tsx

@@ -27,12 +27,13 @@ import {
 	useGlobalChartsContext,
 	useGlobalChartsTheme,
 } from '../../providers';
+import { useDefaultHiddenSeries } from '../../providers/chart-context/hooks/use-default-hidden-series';
 import { attachSubComponents } from '../../utils';
 import { renderDefaultTooltip } from '../line-chart';
 import { useChartChildren } from '../private/chart-composition';
+import { ChartInstanceContext, type ChartInstanceRef } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
-import { SingleChartContext, type SingleChartRef } from '../private/single-chart-context';
-import { SvgEmptyState } from '../private/svg-empty-state';
+import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
 import { getCurveType, getFormatter, guessOptimalNumTicks } from '../private/time-axis';
 import { withResponsive } from '../private/with-responsive';
 import { useXZoom, ZoomResetButton, ZoomSelectionRect, ZoomClip } from '../private/x-zoom';
@@ -43,7 +44,7 @@ import type { DataPointDate, Optional } from '../../types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { TickFormatter } from '@visx/axis';
 
-const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
+const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 	(
 		{
 			data,
@@ -72,6 +73,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 			zoomable = false,
 			rescaleYOnVisibilityChange,
 			rescaleYOnLegendToggle,
+			defaultHiddenSeries,
 			children,
 			gridVisibility,
 			gap = 'md',
@@ -88,10 +90,15 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 		const providerTheme = useGlobalChartsTheme();
 		const theme = useXYChartTheme( data );
 		const chartId = useChartId( providedChartId );
+		const hiddenSeries = useDefaultHiddenSeries( chartId, defaultHiddenSeries );
+		const isSeriesVisible = useCallback(
+			( seriesLabel: string ) => ! hiddenSeries.has( seriesLabel ),
+			[ hiddenSeries ]
+		);
 		const chartRef = useRef< HTMLDivElement >( null );
 		const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
 		const [ isNavigating, setIsNavigating ] = useState( false );
-		const internalChartRef = useRef< SingleChartRef >( null );
+		const internalChartRef = useRef< ChartInstanceRef >( null );
 
 		const zoom = useXZoom< Date >( {
 			enabled: zoomable,
@@ -121,18 +128,15 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 		);
 
 		const dataSorted = useChartDataTransform( data );
-		const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+		const { getElementStyles } = useGlobalChartsContext();
 
 		const seriesWithVisibility = useMemo( () => {
-			if ( ! chartId || ! legendInteractive ) {
-				return dataSorted.map( ( series, index ) => ( { series, index, isVisible: true } ) );
-			}
 			return dataSorted.map( ( series, index ) => ( {
 				series,
 				index,
-				isVisible: isSeriesVisible( chartId, series.label ),
+				isVisible: ! hiddenSeries.has( series.label ),
 			} ) );
-		}, [ dataSorted, chartId, isSeriesVisible, legendInteractive ] );
+		}, [ dataSorted, hiddenSeries ] );
 
 		const allSeriesHidden = useMemo(
 			() => seriesWithVisibility.every( ( { isVisible } ) => ! isVisible ),
@@ -157,7 +161,6 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 		const fixedYDomain = useMemo< [ number, number ] | undefined >( () => {
 			if (
 				rescaleYOnVisibility ||
-				! legendInteractive ||
 				! dataSorted.length ||
 				! dataSorted[ 0 ].data.length ||
 				( stacked && stackOffset !== 'none' )
@@ -199,11 +202,11 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 			}
 			if ( max === -Infinity ) return undefined;
 			return [ Math.min( 0, min ), max ];
-		}, [ dataSorted, stacked, stackOffset, legendInteractive, rescaleYOnVisibility ] );
+		}, [ dataSorted, stacked, stackOffset, rescaleYOnVisibility ] );
 
 		const chartOptions = useMemo( () => {
-			const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
-			const formatter = xAxisOptions.tickFormat || getFormatter( dataSorted, tickResolution );
+			const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
+			const formatter = tickFormat || getFormatter( dataSorted, tickResolution );
 
 			return {
 				axis: {
@@ -283,7 +286,6 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 		);
 		const filteredRenderTooltip = useCallback(
 			( params: Parameters< typeof renderTooltip >[ 0 ] ) => {
-				if ( ! legendInteractive ) return renderTooltip( params );
 				const datumByKey = params?.tooltipData?.datumByKey;
 				if ( ! datumByKey ) return renderTooltip( params );
 				const filtered = Object.fromEntries(
@@ -307,7 +309,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 					} as typeof params.tooltipData,
 				} );
 			},
-			[ renderTooltip, legendInteractive, visibleLabels ]
+			[ renderTooltip, visibleLabels ]
 		);
 
 		// Defaults that depend on stacked vs overlapping mode.
@@ -354,7 +356,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 					dataKey={ seriesData?.label }
 					data={ seriesData.data as DataPointDate[] }
 					xAccessor={ accessors.xAccessor }
-					yAccessor={ isVisible || ! legendInteractive ? accessors.yAccessor : zeroYAccessor }
+					yAccessor={ isVisible ? accessors.yAccessor : zeroYAccessor }
 					fill={ color }
 					fillOpacity={ resolvedFillOpacity }
 					{ ...( stacked ? {} : { renderLine: resolvedWithStroke, curve } ) }
@@ -365,10 +367,11 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 		};
 
 		return (
-			<SingleChartContext.Provider
+			<ChartInstanceContext.Provider
 				value={ {
 					chartId,
 					chartRef: internalChartRef,
+					isSeriesVisible,
 					chartWidth: width,
 					chartHeight: measuredChartHeight || 0,
 				} }
@@ -437,10 +440,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 													width={ width }
 													height={ chartHeight }
 												>
-													{ __(
-														'All series are hidden. Click legend items to show data.',
-														'jetpack-charts'
-													) }
+													{ getAllHiddenMessage( legendInteractive, 'series' ) }
 												</SvgEmptyState>
 											) : null }
 
@@ -503,7 +503,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 						);
 					} }
 				</ChartLayout>
-			</SingleChartContext.Provider>
+			</ChartInstanceContext.Provider>
 		);
 	}
 );
@@ -515,16 +515,16 @@ type AreaChartSubComponents = {
 type AreaChartBaseProps = Optional< AreaChartProps, 'width' | 'height' | 'size' >;
 
 type AreaChartComponent = React.ForwardRefExoticComponent<
-	AreaChartBaseProps & React.RefAttributes< SingleChartRef >
+	AreaChartBaseProps & React.RefAttributes< ChartInstanceRef >
 > &
 	AreaChartSubComponents;
 
 type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<
-	AreaChartBaseProps & ResponsiveConfig & React.RefAttributes< SingleChartRef >
+	AreaChartBaseProps & ResponsiveConfig & React.RefAttributes< ChartInstanceRef >
 > &
 	AreaChartSubComponents;
 
-const AreaChartWithProvider = forwardRef< SingleChartRef, AreaChartProps >( ( props, ref ) => {
+const AreaChartWithProvider = forwardRef< ChartInstanceRef, AreaChartProps >( ( props, ref ) => {
 	const existingContext = useContext( GlobalChartsContext );
 
 	if ( existingContext ) {

package/src/charts/area-chart/private/overlays.tsx

@@ -2,7 +2,7 @@ import { DataContext, TooltipContext } from '@visx/xychart';
 import { useContext, useImperativeHandle } from 'react';
 import type { ElementStyles, GetElementStylesParams } from '../../../providers';
 import type { DataPointDate, SeriesData } from '../../../types';
-import type { SingleChartRef } from '../../private/single-chart-context';
+import type { ChartInstanceRef } from '../../private/chart-instance-context';
 import type { FC, ReactNode, Ref } from 'react';
 
 export type VisibleSeriesEntry = { series: SeriesData; index: number; isVisible: boolean };
@@ -11,10 +11,10 @@ export type VisibleSeriesEntry = { series: SeriesData; index: number; isVisible:
 // instead of spreading `any`. `Number(...)` + `isFinite` guards every call.
 type ScaleFn = ( input: Date | number ) => number;
 
-// Bridges visx's `DataContext` to the chart's `SingleChartRef` so consumers
+// Bridges visx's `DataContext` to the chart's `ChartInstanceRef` so consumers
 // can read scales and dimensions imperatively. Must be inside `<XYChart>`.
 export const AreaChartScalesRef: FC< {
-	chartRef?: Ref< SingleChartRef >;
+	chartRef?: Ref< ChartInstanceRef >;
 	width: number;
 	height: number;
 	margin?: { top?: number; right?: number; bottom?: number; left?: number };

package/src/charts/area-chart/test/area-chart.test.tsx

@@ -1,9 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
 import { GlobalChartsProvider } from '../../../providers';
+import { useGlobalChartsContext } from '../../../providers/chart-context/hooks/use-global-charts-context';
 import AreaChart, { AreaChartUnresponsive } from '../area-chart';
-import type { SingleChartRef } from '../../private/single-chart-context';
+import type { GlobalChartsContextValue } from '../../../providers/chart-context/types';
+import type { ChartInstanceRef } from '../../private/chart-instance-context';
 
 const mockRefCallback = jest.fn();
 jest.mock( '../../../hooks/use-element-size', () => ( {
@@ -42,7 +44,7 @@ describe( 'AreaChart', () => {
 		);
 	};
 
-	const renderUnresponsive = ( props = {}, ref?: React.Ref< SingleChartRef > ) => {
+	const renderUnresponsive = ( props = {}, ref?: React.Ref< ChartInstanceRef > ) => {
 		return render(
 			<GlobalChartsProvider>
 				<AreaChartUnresponsive { ...defaultProps } { ...props } ref={ ref } />
@@ -110,6 +112,51 @@ describe( 'AreaChart', () => {
 		} );
 	} );
 
+	describe( 'X-Axis Ticks', () => {
+		const monthlySeries = [
+			{
+				label: 'Series A',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 10 },
+					{ date: new Date( '2024-04-01' ), value: 20 },
+					{ date: new Date( '2024-07-01' ), value: 30 },
+					{ date: new Date( '2024-10-01' ), value: 40 },
+					{ date: new Date( '2025-03-01' ), value: 50 },
+				],
+			},
+		];
+
+		test( 'keeps the derived month formatter when tickFormat is passed as undefined', () => {
+			renderWithProvider( {
+				options: { axis: { x: { tickFormat: undefined } } },
+				data: monthlySeries,
+			} );
+
+			// January is absent: formatMonthOrYearTick renders it as the year instead.
+			const ticks = screen.getAllByText( /^(Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)$/ );
+			expect( ticks.length ).toBeGreaterThan( 1 );
+			expect(
+				screen.queryByText( /^(February|March|April|June|July|August|September|October)$/ )
+			).not.toBeInTheDocument();
+		} );
+
+		test( 'honors an explicit tickFormat over the derived formatter', () => {
+			renderWithProvider( {
+				options: {
+					axis: {
+						x: {
+							tickFormat: ( date: Date | number ) =>
+								`tick-${ new Date( Number( date ) ).getUTCMonth() }`,
+						},
+					},
+				},
+				data: monthlySeries,
+			} );
+
+			expect( screen.getAllByText( /^tick-\d+$/ ).length ).toBeGreaterThan( 0 );
+		} );
+	} );
+
 	describe( 'Stacking', () => {
 		test( 'is stacked by default', () => {
 			renderWithProvider();
@@ -242,7 +289,7 @@ describe( 'AreaChart', () => {
 
 		test( 'y-axis rescales across legend toggles by default', async () => {
 			const user = userEvent.setup();
-			const ref = createRef< SingleChartRef >();
+			const ref = createRef< ChartInstanceRef >();
 			render(
 				<GlobalChartsProvider>
 					<AreaChartUnresponsive
@@ -274,7 +321,7 @@ describe( 'AreaChart', () => {
 			// Exercises the non-stacked branch of fixedYDomain, which scans the
 			// raw min/max across all series rather than summing stack columns.
 			const user = userEvent.setup();
-			const ref = createRef< SingleChartRef >();
+			const ref = createRef< ChartInstanceRef >();
 			render(
 				<GlobalChartsProvider>
 					<AreaChartUnresponsive
@@ -306,7 +353,7 @@ describe( 'AreaChart', () => {
 
 		test( 'y-axis stays pinned when rescaleYOnLegendToggle is false', async () => {
 			const user = userEvent.setup();
-			const ref = createRef< SingleChartRef >();
+			const ref = createRef< ChartInstanceRef >();
 			render(
 				<GlobalChartsProvider>
 					<AreaChartUnresponsive
@@ -335,7 +382,7 @@ describe( 'AreaChart', () => {
 
 		test( 'y-axis stays pinned when rescaleYOnVisibilityChange is false', async () => {
 			const user = userEvent.setup();
-			const ref = createRef< SingleChartRef >();
+			const ref = createRef< ChartInstanceRef >();
 			render(
 				<GlobalChartsProvider>
 					<AreaChartUnresponsive
@@ -362,12 +409,196 @@ describe( 'AreaChart', () => {
 			expect( afterToggleDomain ).toEqual( initialDomain );
 		} );
 
+		it( 'hides a series programmatically when the legend is not interactive', () => {
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<AreaChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-programmatic-area"
+						data={ [
+							{
+								label: 'Series A',
+								data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+								options: {},
+							},
+							{
+								label: 'Series B',
+								data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+								options: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.queryByText( /all series are hidden/i ) ).not.toBeInTheDocument();
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-programmatic-area', 'Series A' );
+				context.toggleSeriesVisibility( 'test-programmatic-area', 'Series B' );
+			} );
+
+			expect( screen.getByText( /all series are hidden/i ) ).toBeInTheDocument();
+		} );
+
+		it( 'omits the click instruction when the legend cannot be clicked', () => {
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<AreaChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-empty-copy-area"
+						data={ [
+							{
+								label: 'Series A',
+								data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+								options: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-empty-copy-area', 'Series A' );
+			} );
+
+			expect( screen.getByText( 'All series are hidden.' ) ).toBeInTheDocument();
+			expect( screen.queryByText( /click legend items/i ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'pins the value axis across a programmatic hide when rescaleYOnVisibilityChange is false', () => {
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+			const ref = createRef< ChartInstanceRef >();
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<AreaChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-programmatic-pin-area"
+						rescaleYOnVisibilityChange={ false }
+						ref={ ref }
+						data={ [
+							{
+								label: 'Series A',
+								data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+								options: {},
+							},
+							{
+								label: 'Series B',
+								data: [ { date: new Date( '2024-01-01' ), value: 200, label: 'Jan 1' } ],
+								options: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const before = (
+				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
+			 )?.domain();
+			expect( before ).toBeDefined();
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-programmatic-pin-area', 'Series B' );
+			} );
+
+			const after = (
+				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
+			 )?.domain();
+			expect( after ).toEqual( before );
+		} );
+
+		it( 'collapses only the hidden series when the legend is not interactive', () => {
+			// With a non-interactive legend, `renderSeries` must still zero out a
+			// programmatically-hidden series via `yAccessor` — the same collapse the
+			// interactive legend gets — rather than rendering its real data. With the
+			// default `rescaleYOnVisibilityChange` (true), visx derives the y-scale
+			// domain from what's actually rendered, so hiding the taller of two
+			// series must shrink the domain if the collapse took effect.
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+			const ref = createRef< ChartInstanceRef >();
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<AreaChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-programmatic-collapse-area"
+						ref={ ref }
+						data={ [
+							{
+								label: 'Series A',
+								data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+								options: {},
+							},
+							{
+								label: 'Series B',
+								data: [ { date: new Date( '2024-01-01' ), value: 200, label: 'Jan 1' } ],
+								options: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const before = (
+				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
+			 )?.domain();
+			expect( before ).toBeDefined();
+			expect( before![ 1 ] ).toBeGreaterThanOrEqual( 200 );
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-programmatic-collapse-area', 'Series B' );
+			} );
+
+			const after = (
+				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
+			 )?.domain();
+			expect( after ).toBeDefined();
+			expect( after![ 1 ] ).toBeLessThan( before![ 1 ] );
+		} );
+
 		test( 'supports negative stacked values without clipping (with pinned Y)', () => {
 			// The mixed-sign full-extent pin only kicks in when the consumer
 			// opts into pinned-Y behavior; visx's natural domain derivation for
 			// a `stackOffset: 'none'` stack does not extend below zero for
 			// purely-negative series, which is what this test guards against.
-			const ref = createRef< SingleChartRef >();
+			const ref = createRef< ChartInstanceRef >();
 			render(
 				<GlobalChartsProvider>
 					<AreaChartUnresponsive
@@ -406,7 +637,7 @@ describe( 'AreaChart', () => {
 		} );
 
 		test( 'does not pin domain for non-default stack offsets', () => {
-			const ref = createRef< SingleChartRef >();
+			const ref = createRef< ChartInstanceRef >();
 			render(
 				<GlobalChartsProvider>
 					<AreaChartUnresponsive
@@ -430,6 +661,44 @@ describe( 'AreaChart', () => {
 		} );
 	} );
 
+	describe( 'Programmatic visibility (non-interactive legend)', () => {
+		test( 'tooltip omits a series hidden programmatically even though the legend is not clickable', async () => {
+			const user = userEvent.setup();
+			const chartId = 'test-noninteractive-tooltip';
+			let context: GlobalChartsContextValue | undefined;
+
+			const Harness = () => {
+				context = useGlobalChartsContext();
+				return (
+					<AreaChart
+						{ ...defaultProps }
+						chartId={ chartId }
+						showLegend
+						legend={ { interactive: false } }
+					/>
+				);
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Harness />
+				</GlobalChartsProvider>
+			);
+
+			act( () => {
+				context?.toggleSeriesVisibility( chartId, 'Series A' );
+			} );
+
+			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			chart.focus();
+			await user.keyboard( '{ArrowRight}' );
+
+			const tooltip = await screen.findByRole( 'tooltip' );
+			expect( tooltip ).not.toHaveTextContent( 'Series A' );
+			expect( tooltip ).toHaveTextContent( 'Series B' );
+		} );
+	} );
+
 	describe( 'Without GlobalChartsProvider', () => {
 		test( 'self-wraps in a provider when none is present', () => {
 			render( <AreaChartUnresponsive { ...defaultProps } /> );
@@ -448,7 +717,7 @@ describe( 'AreaChart', () => {
 
 	describe( 'Chart Ref Interface', () => {
 		test( 'exposes getScales via ref', () => {
-			const ref = createRef< SingleChartRef >();
+			const ref = createRef< ChartInstanceRef >();
 			renderUnresponsive( {}, ref );
 
 			expect( ref.current?.getScales() ).toBeDefined();
@@ -457,7 +726,7 @@ describe( 'AreaChart', () => {
 		} );
 
 		test( 'exposes getChartDimensions via ref', () => {
-			const ref = createRef< SingleChartRef >();
+			const ref = createRef< ChartInstanceRef >();
 			renderUnresponsive( { width: 800, height: 400 }, ref );
 
 			const dimensions = ref.current?.getChartDimensions();
@@ -646,4 +915,70 @@ describe( 'AreaChart', () => {
 			).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'defaultHiddenSeries', () => {
+		it( 'renders a series hidden when named in defaultHiddenSeries', () => {
+			render(
+				<GlobalChartsProvider>
+					<AreaChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						legend={ { interactive: true } }
+						chartId="test-default-hidden-area"
+						defaultHiddenSeries={ [ 'Series B' ] }
+						data={ [
+							{
+								label: 'Series A',
+								data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+								options: {},
+							},
+							{
+								label: 'Series B',
+								data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+								options: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const items = screen.getAllByRole( 'button' );
+			expect( items[ 0 ] ).toHaveAttribute( 'aria-pressed', 'true' );
+			expect( items[ 1 ] ).toHaveAttribute( 'aria-pressed', 'false' );
+		} );
+
+		it( 'lets the user reveal a series seeded hidden', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<GlobalChartsProvider>
+					<AreaChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						legend={ { interactive: true } }
+						chartId="test-default-hidden-reveal-area"
+						defaultHiddenSeries={ [ 'Series B' ] }
+						data={ [
+							{
+								label: 'Series A',
+								data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+								options: {},
+							},
+							{
+								label: 'Series B',
+								data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+								options: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			await user.click( screen.getAllByRole( 'button' )[ 1 ] );
+
+			expect( screen.getAllByRole( 'button' )[ 1 ] ).toHaveAttribute( 'aria-pressed', 'true' );
+		} );
+	} );
 } );

package/src/charts/area-chart/types.ts

@@ -3,12 +3,13 @@ import type {
 	DataPointDate,
 	SeriesData,
 	SeriesChartLegendConfig,
+	SeriesVisibilityProps,
 } from '../../types';
 import type { RenderTooltipParams } from '../../visx/types';
 import type { CurveType } from '../line-chart/types';
 import type { ReactNode } from 'react';
 
-export interface AreaChartProps extends BaseChartProps< SeriesData[] > {
+export interface AreaChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */
@@ -63,8 +64,8 @@ export interface AreaChartProps extends BaseChartProps< SeriesData[] > {
 	 */
 	zoomable?: boolean;
 	/**
-	 * Whether the Y axis rescales to fit only the visible series when series are
-	 * hidden or shown through the interactive legend.
+	 * Whether the Y axis rescales to fit only the visible series when the set of
+	 * visible series changes — via the interactive legend or otherwise.
 	 * Defaults to `true`, matching LineChart. Set to `false` to pin the Y axis to
 	 * the full data extent so hiding series does not move the chart's baseline.
 	 * @default true