@automattic/charts 1.4.3 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.4.3",
+	"version": "1.5.1",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.0",
+		"@automattic/number-formatters": "^1.2.1",
 		"@babel/runtime": "7.29.2",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -83,9 +83,9 @@
 		"@visx/vendor": "^3.12.0",
 		"@visx/xychart": "^3.12.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^12.0.0",
+		"@wordpress/icons": "^13.0.0",
 		"@wordpress/theme": "0.13.0",
-		"@wordpress/ui": "0.11.0",
+		"@wordpress/ui": "0.13.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",

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

@@ -35,6 +35,7 @@ import { SingleChartContext, type SingleChartRef } from '../private/single-chart
 import { 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';
 import styles from './area-chart.module.scss';
 import { AreaChartScalesRef, HoverGlyphs, validateData } from './private';
 import type { AreaChartProps } from './types';
@@ -68,6 +69,8 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 			onPointerUp,
 			onPointerMove,
 			onPointerOut,
+			zoomable = false,
+			rescaleYOnLegendToggle = true,
 			children,
 			gridVisibility,
 			gap = 'md',
@@ -86,6 +89,12 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 		const [ isNavigating, setIsNavigating ] = useState( false );
 		const internalChartRef = useRef< SingleChartRef >( null );
 
+		const zoom = useXZoom< Date >( {
+			enabled: zoomable,
+			chartRef: internalChartRef,
+			userHandlers: { onPointerDown, onPointerMove, onPointerUp },
+		} );
+
 		const { legendChildren, nonLegendChildren } = useChartChildren( children, 'AreaChart' );
 		const [ measuredChartHeight, setMeasuredChartHeight ] = useState< number | undefined >();
 
@@ -136,12 +145,14 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 		} );
 
 		// Computed from the full data set (ignoring legend visibility) so the y-axis stays
-		// fixed when series are toggled off — otherwise visx auto-fits to the remaining data
-		// and the chart appears to rescale. Skipped for non-default stack offsets, which
-		// reshape the y-extent (`expand` → [0,1], `wiggle`/`silhouette` → centred around
-		// zero) — letting visx derive the domain is correct there.
+		// fixed when series are toggled off - otherwise visx auto-fits to the remaining
+		// data and the chart's baseline appears to move. Opt-in via
+		// `rescaleYOnLegendToggle={ false }`. Skipped for non-default stack offsets,
+		// which reshape the y-extent (`expand` -> [0,1], `wiggle`/`silhouette` -> centred
+		// around zero); letting visx derive the domain is correct there.
 		const fixedYDomain = useMemo< [ number, number ] | undefined >( () => {
 			if (
+				rescaleYOnLegendToggle ||
 				! legendInteractive ||
 				! dataSorted.length ||
 				! dataSorted[ 0 ].data.length ||
@@ -184,7 +195,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 			}
 			if ( max === -Infinity ) return undefined;
 			return [ Math.min( 0, min ), max ];
-		}, [ dataSorted, stacked, stackOffset, legendInteractive ] );
+		}, [ dataSorted, stacked, stackOffset, legendInteractive, rescaleYOnLegendToggle ] );
 
 		const chartOptions = useMemo( () => {
 			const formatter = options?.axis?.x?.tickFormat || getFormatter( dataSorted );
@@ -209,6 +220,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 				xScale: {
 					type: 'time' as const,
 					...options?.xScale,
+					...( zoom.domain ? { domain: zoom.domain } : {} ),
 				},
 				yScale: {
 					type: 'linear' as const,
@@ -219,7 +231,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 					...options?.yScale,
 				},
 			};
-		}, [ options, dataSorted, width, stacked, fixedYDomain ] );
+		}, [ options, dataSorted, width, stacked, fixedYDomain, zoom.domain ] );
 
 		const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme );
 
@@ -378,7 +390,8 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 								onBlur={ onChartBlur }
 							>
 								{ chartHeight > 0 && (
-									<div ref={ chartRef }>
+									<div ref={ chartRef } style={ { position: 'relative' } }>
+										{ zoomable && zoom.domain && <ZoomResetButton onClick={ zoom.reset } /> }
 										<XYChart
 											theme={ theme }
 											width={ width }
@@ -386,9 +399,9 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 											margin={ { ...defaultMargin, ...margin } }
 											xScale={ chartOptions.xScale }
 											yScale={ chartOptions.yScale }
-											onPointerDown={ onPointerDown }
-											onPointerUp={ onPointerUp }
-											onPointerMove={ onPointerMove }
+											onPointerDown={ zoom.handlers.onPointerDown }
+											onPointerUp={ zoom.handlers.onPointerUp }
+											onPointerMove={ zoom.handlers.onPointerMove }
 											onPointerOut={ onPointerOut }
 											pointerEventsDataKey="nearest"
 										>
@@ -410,17 +423,21 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 												</SvgEmptyState>
 											) : null }
 
-											{ ! allSeriesHidden && stacked && (
-												<AnimatedAreaStack
-													curve={ curve }
-													offset={ stackOffset }
-													renderLine={ resolvedWithStroke }
-												>
-													{ seriesWithVisibility.map( renderSeries ) }
-												</AnimatedAreaStack>
-											) }
-
-											{ ! allSeriesHidden && ! stacked && seriesWithVisibility.map( renderSeries ) }
+											{ /* Area is animated, so clip the whole time it is zoomable to keep the zoom-out animation in bounds. */ }
+											<ZoomClip active={ zoomable } chartId={ chartId }>
+												{ ! allSeriesHidden && stacked && (
+													<AnimatedAreaStack
+														curve={ curve }
+														offset={ stackOffset }
+														renderLine={ resolvedWithStroke }
+													>
+														{ seriesWithVisibility.map( renderSeries ) }
+													</AnimatedAreaStack>
+												) }
+												{ ! allSeriesHidden &&
+													! stacked &&
+													seriesWithVisibility.map( renderSeries ) }
+											</ZoomClip>
 
 											{ withTooltips && (
 												<>
@@ -456,6 +473,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 												height={ height || chartHeight }
 												margin={ margin }
 											/>
+											{ zoomable && <ZoomSelectionRect drag={ zoom.drag } /> }
 										</XYChart>
 									</div>
 								) }

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

@@ -240,7 +240,7 @@ describe( 'AreaChart', () => {
 			expect( keyboardCall![ 0 ].tooltipData?.nearestDatum?.key ).not.toBe( 'Series A' );
 		} );
 
-		test( 'y-axis domain stays fixed across legend toggles', async () => {
+		test( 'y-axis rescales across legend toggles by default', async () => {
 			const user = userEvent.setup();
 			const ref = createRef< SingleChartRef >();
 			render(
@@ -248,7 +248,7 @@ describe( 'AreaChart', () => {
 					<AreaChartUnresponsive
 						{ ...defaultProps }
 						showLegend
-						chartId="test-interactive-domain"
+						chartId="test-interactive-domain-rescale"
 						legend={ { interactive: true } }
 						ref={ ref }
 					/>
@@ -262,13 +262,82 @@ describe( 'AreaChart', () => {
 
 			await user.click( screen.getByText( 'Series A' ) );
 
+			const afterToggleDomain = (
+				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
+			 )?.domain();
+			// Hiding Series A drops the upper bound; visx should refit.
+			expect( afterToggleDomain ).toBeDefined();
+			expect( afterToggleDomain![ 1 ] ).toBeLessThan( initialDomain![ 1 ] );
+		} );
+
+		test( 'y-axis stays pinned for unstacked area when rescaleYOnLegendToggle is false', async () => {
+			// 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 >();
+			render(
+				<GlobalChartsProvider>
+					<AreaChartUnresponsive
+						{ ...defaultProps }
+						showLegend
+						chartId="test-interactive-domain-pin-unstacked"
+						legend={ { interactive: true } }
+						stacked={ false }
+						rescaleYOnLegendToggle={ false }
+						ref={ ref }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const initialDomain = (
+				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
+			 )?.domain();
+			expect( initialDomain ).toBeDefined();
+			// defaultProps has values up to 20; pinned-unstacked should cover the max.
+			expect( initialDomain![ 1 ] ).toBeGreaterThanOrEqual( 20 );
+
+			await user.click( screen.getByText( 'Series A' ) );
+
 			const afterToggleDomain = (
 				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
 			 )?.domain();
 			expect( afterToggleDomain ).toEqual( initialDomain );
 		} );
 
-		test( 'supports negative stacked values without clipping', () => {
+		test( 'y-axis stays pinned when rescaleYOnLegendToggle is false', async () => {
+			const user = userEvent.setup();
+			const ref = createRef< SingleChartRef >();
+			render(
+				<GlobalChartsProvider>
+					<AreaChartUnresponsive
+						{ ...defaultProps }
+						showLegend
+						chartId="test-interactive-domain-pin"
+						legend={ { interactive: true } }
+						rescaleYOnLegendToggle={ false }
+						ref={ ref }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const initialDomain = (
+				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
+			 )?.domain();
+			expect( initialDomain ).toBeDefined();
+
+			await user.click( screen.getByText( 'Series A' ) );
+
+			const afterToggleDomain = (
+				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
+			 )?.domain();
+			expect( afterToggleDomain ).toEqual( initialDomain );
+		} );
+
+		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 >();
 			render(
 				<GlobalChartsProvider>
@@ -278,6 +347,7 @@ describe( 'AreaChart', () => {
 						chartId="test-interactive-negative"
 						showLegend
 						legend={ { interactive: true } }
+						rescaleYOnLegendToggle={ false }
 						data={ [
 							{
 								label: 'Pos',
@@ -464,4 +534,14 @@ describe( 'AreaChart', () => {
 			expect( screen.queryByTestId( 'area-chart-hover-glyph-0' ) ).not.toBeInTheDocument();
 		} );
 	} );
+
+	// The area is animated, so it clips whenever zoomable (not just while zoomed).
+	test( 'clips the series to the plot when zoomable', () => {
+		renderUnresponsive( { zoomable: true, chartId: 'zoomtest' } );
+
+		expect( screen.getByTestId( 'chart-series-clip-group' ) ).toHaveAttribute(
+			'clip-path',
+			'url(#chart-zoom-clip-zoomtest)'
+		);
+	} );
 } );

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

@@ -47,5 +47,20 @@ export interface AreaChartProps extends BaseChartProps< SeriesData[] > {
 	 * @default false when stacked, true when overlapping
 	 */
 	withStroke?: boolean;
+	/**
+	 * Enable drag-to-zoom on the X axis. The user drags horizontally to
+	 * select a range; the X axis rescales to that range. A small reset
+	 * button appears in the top-right of the chart while zoomed.
+	 */
+	zoomable?: boolean;
+	/**
+	 * When using an interactive legend, controls whether the Y axis rescales
+	 * to fit only the visible series. Defaults to `true`, matching the
+	 * intuitive default for LineChart and BarChart. Set to `false` to pin
+	 * the Y axis to the full data extent so toggling legend items off does
+	 * not move the chart's baseline.
+	 * @default true
+	 */
+	rescaleYOnLegendToggle?: boolean;
 	children?: ReactNode;
 }

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

@@ -37,6 +37,7 @@ import { SingleChartContext, type SingleChartRef } from '../private/single-chart
 import { 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';
 import styles from './line-chart.module.scss';
 import { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';
 import type { RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';
@@ -177,6 +178,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 			onPointerUp = undefined,
 			onPointerMove = undefined,
 			onPointerOut = undefined,
+			zoomable = false,
 			children,
 			gridVisibility,
 			gap = 'md',
@@ -195,6 +197,12 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		const [ isNavigating, setIsNavigating ] = useState( false );
 		const internalChartRef = useRef< SingleChartRef >( null );
 
+		const zoom = useXZoom< Date >( {
+			enabled: zoomable,
+			chartRef: internalChartRef,
+			userHandlers: { onPointerDown, onPointerMove, onPointerUp },
+		} );
+
 		// Process children for composition API (Legend, etc.)
 		const { legendChildren, nonLegendChildren } = useChartChildren( children, 'LineChart' );
 		const [ measuredChartHeight, setMeasuredChartHeight ] = useState< number | undefined >();
@@ -273,6 +281,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 				xScale: {
 					type: 'time' as const,
 					...options?.xScale,
+					...( zoom.domain ? { domain: zoom.domain } : {} ),
 				},
 				yScale: {
 					type: 'linear' as const,
@@ -281,7 +290,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 					...options?.yScale,
 				},
 			};
-		}, [ options, dataSorted, width ] );
+		}, [ options, dataSorted, width, zoom.domain ] );
 
 		const tooltipRenderGlyph = useMemo( () => {
 			return ( props: GlyphProps< DataPointDate > ) => {
@@ -412,7 +421,8 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 								onBlur={ onChartBlur }
 							>
 								{ chartHeight > 0 && (
-									<div ref={ chartRef }>
+									<div ref={ chartRef } style={ { position: 'relative' } }>
+										{ zoomable && zoom.domain && <ZoomResetButton onClick={ zoom.reset } /> }
 										<XYChart
 											theme={ theme }
 											width={ width }
@@ -424,9 +434,9 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 											// xScale and yScale could be set in Axis as well, but they are `scale` props there.
 											xScale={ chartOptions.xScale }
 											yScale={ chartOptions.yScale }
-											onPointerDown={ onPointerDown }
-											onPointerUp={ onPointerUp }
-											onPointerMove={ onPointerMove }
+											onPointerDown={ zoom.handlers.onPointerDown }
+											onPointerUp={ zoom.handlers.onPointerUp }
+											onPointerMove={ zoom.handlers.onPointerMove }
 											onPointerOut={ onPointerOut }
 											pointerEventsDataKey="nearest"
 										>
@@ -448,86 +458,93 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 												</SvgEmptyState>
 											) : null }
 
-											{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {
-												// Skip rendering invisible series
-												if ( ! isVisible ) {
-													return null;
-												}
-
-												const { color, lineStyles, glyph } = getElementStyles( {
-													data: seriesData,
-													index,
-												} );
-
-												const lineProps = {
-													stroke: color,
-													...lineStyles,
-												};
-
-												return (
-													<g key={ seriesData?.label || index }>
-														{ withGradientFill && (
-															<LinearGradient
-																id={ `area-gradient-${ chartId }-${ index + 1 }` }
-																from={ color }
-																fromOpacity={ 0.4 }
-																toOpacity={ 0.1 }
-																to={ providerTheme.backgroundColor }
-																{ ...seriesData.options?.gradient }
-																data-testid="line-gradient"
-															>
-																{ seriesData.options?.gradient?.stops?.map( ( stop, stopIndex ) => (
-																	<stop
-																		key={ `${ stop.offset }-${ stop.color || color }` }
-																		offset={ stop.offset }
-																		stopColor={ stop.color || color }
-																		stopOpacity={ stop.opacity ?? 1 }
-																		data-testid={ `line-gradient-stop-${ chartId }-${ index }-${ stopIndex }` }
+											{ /* Line is not animated, so clip only while zoomed; its edge glyphs sit on the plot border and must not be clipped. */ }
+											<ZoomClip active={ zoomable && !! zoom.domain } chartId={ chartId }>
+												{ seriesWithVisibility.map(
+													( { series: seriesData, index, isVisible } ) => {
+														// Skip rendering invisible series
+														if ( ! isVisible ) {
+															return null;
+														}
+
+														const { color, lineStyles, glyph } = getElementStyles( {
+															data: seriesData,
+															index,
+														} );
+
+														const lineProps = {
+															stroke: color,
+															...lineStyles,
+														};
+
+														return (
+															<g key={ seriesData?.label || index }>
+																{ withGradientFill && (
+																	<LinearGradient
+																		id={ `area-gradient-${ chartId }-${ index + 1 }` }
+																		from={ color }
+																		fromOpacity={ 0.4 }
+																		toOpacity={ 0.1 }
+																		to={ providerTheme.backgroundColor }
+																		{ ...seriesData.options?.gradient }
+																		data-testid="line-gradient"
+																	>
+																		{ seriesData.options?.gradient?.stops?.map(
+																			( stop, stopIndex ) => (
+																				<stop
+																					key={ `${ stop.offset }-${ stop.color || color }` }
+																					offset={ stop.offset }
+																					stopColor={ stop.color || color }
+																					stopOpacity={ stop.opacity ?? 1 }
+																					data-testid={ `line-gradient-stop-${ chartId }-${ index }-${ stopIndex }` }
+																				/>
+																			)
+																		) }
+																	</LinearGradient>
+																) }
+																<AreaSeries
+																	key={ seriesData?.label }
+																	dataKey={ seriesData?.label }
+																	data={ seriesData.data as DataPointDate[] }
+																	{ ...accessors }
+																	fill={
+																		withGradientFill
+																			? `url(#area-gradient-${ chartId }-${ index + 1 })`
+																			: 'transparent'
+																	}
+																	renderLine={ true }
+																	curve={ getCurveType( curveType, smoothing ) }
+																	lineProps={ lineProps }
+																/>
+
+																{ withStartGlyphs && (
+																	<LineChartGlyph
+																		index={ index }
+																		data={ seriesData }
+																		color={ color }
+																		renderGlyph={ glyph ?? renderGlyph }
+																		accessors={ accessors }
+																		glyphStyle={ glyphStyle }
+																		position="start"
 																	/>
-																) ) }
-															</LinearGradient>
-														) }
-														<AreaSeries
-															key={ seriesData?.label }
-															dataKey={ seriesData?.label }
-															data={ seriesData.data as DataPointDate[] }
-															{ ...accessors }
-															fill={
-																withGradientFill
-																	? `url(#area-gradient-${ chartId }-${ index + 1 })`
-																	: 'transparent'
-															}
-															renderLine={ true }
-															curve={ getCurveType( curveType, smoothing ) }
-															lineProps={ lineProps }
-														/>
-
-														{ withStartGlyphs && (
-															<LineChartGlyph
-																index={ index }
-																data={ seriesData }
-																color={ color }
-																renderGlyph={ glyph ?? renderGlyph }
-																accessors={ accessors }
-																glyphStyle={ glyphStyle }
-																position="start"
-															/>
-														) }
-
-														{ withEndGlyphs && (
-															<LineChartGlyph
-																index={ index }
-																data={ seriesData }
-																color={ color }
-																renderGlyph={ glyph ?? renderGlyph }
-																accessors={ accessors }
-																glyphStyle={ glyphStyle }
-																position="end"
-															/>
-														) }
-													</g>
-												);
-											} ) }
+																) }
+
+																{ withEndGlyphs && (
+																	<LineChartGlyph
+																		index={ index }
+																		data={ seriesData }
+																		color={ color }
+																		renderGlyph={ glyph ?? renderGlyph }
+																		accessors={ accessors }
+																		glyphStyle={ glyphStyle }
+																		position="end"
+																	/>
+																) }
+															</g>
+														);
+													}
+												) }
+											</ZoomClip>
 
 											{ withTooltips && (
 												<AccessibleTooltip
@@ -556,6 +573,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 												height={ height }
 												margin={ margin }
 											/>
+											{ zoomable && <ZoomSelectionRect drag={ zoom.drag } /> }
 										</XYChart>
 									</div>
 								) }

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

@@ -14,6 +14,31 @@ jest.mock( '../../../hooks/use-element-size', () => ( {
 	useElementSize: () => [ mockRefCallback, 500, 300 ],
 } ) );
 
+// Drive the zoom state directly so we can assert the clip-path behaviour without
+// simulating a pointer drag (svgPoint geometry is unavailable in jsdom). The rest
+// of the x-zoom module (ZoomClipPath, getZoomClipPathId, etc.) stays real.
+const mockUseXZoom = jest.fn();
+jest.mock( '../../private/x-zoom', () => {
+	const actual = jest.requireActual( '../../private/x-zoom' );
+	return {
+		__esModule: true,
+		...actual,
+		useXZoom: ( ...args: unknown[] ) => mockUseXZoom( ...args ),
+	};
+} );
+
+const passthroughZoom = () => ( {
+	domain: null,
+	drag: null,
+	reset: jest.fn(),
+	handlers: { onPointerDown: jest.fn(), onPointerMove: jest.fn(), onPointerUp: jest.fn() },
+} );
+
+beforeEach( () => {
+	mockUseXZoom.mockReset();
+	mockUseXZoom.mockImplementation( passthroughZoom );
+} );
+
 const customTheme = {
 	...defaultTheme,
 	glyphs: [
@@ -1253,4 +1278,20 @@ describe( 'LineChart', () => {
 			} );
 		} );
 	} );
+
+	// The line is not animated, so it clips only while actually zoomed.
+	test( 'clips the series to the plot when zoomed', () => {
+		mockUseXZoom.mockImplementation( () => ( {
+			domain: [ new Date( '2024-01-01' ), new Date( '2024-01-02' ) ],
+			drag: null,
+			reset: jest.fn(),
+			handlers: { onPointerDown: jest.fn(), onPointerMove: jest.fn(), onPointerUp: jest.fn() },
+		} ) );
+		renderUnwrappedWithTheme( { zoomable: true, chartId: 'zoomtest' } );
+
+		expect( screen.getByTestId( 'chart-series-clip-group' ) ).toHaveAttribute(
+			'clip-path',
+			'url(#chart-zoom-clip-zoomtest)'
+		);
+	} );
 } );

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

@@ -41,6 +41,12 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] > {
 		showVertical?: boolean;
 		showHorizontal?: boolean;
 	};
+	/**
+	 * Enable drag-to-zoom on the X axis. The user drags horizontally to
+	 * select a range; the X axis rescales to that range. A small reset
+	 * button appears in the top-right of the chart while zoomed.
+	 */
+	zoomable?: boolean;
 	children?: ReactNode;
 }