@automattic/charts 3.0.0 → 3.1.0

package/src/charts/heatmap-chart/test/build-calendar-data.test.ts

@@ -142,3 +142,128 @@ describe( 'buildCalendarHeatmapData', () => {
 		expect( rowLabels[ 4 ] ).toBe( 'Thu' );
 	} );
 } );
+
+describe( 'buildCalendarHeatmapData with a grid wider than the series', () => {
+	// Mon Jan 1 2024 through Sun Jan 7 — one whole week of data.
+	const oneWeek: DataPointDate[] = [
+		{ dateString: '2024-01-01', value: 3 },
+		{ dateString: '2024-01-07', value: 4 },
+	];
+
+	test( 'draws the extra weeks and marks them placeholders, not blank cells', () => {
+		const { data } = buildCalendarHeatmapData( oneWeek, {
+			weekStartsOn: 1,
+			gridSpan: { start: '2023-12-04' }, // 4 weeks earlier
+		} );
+
+		expect( data ).toHaveLength( 5 );
+
+		// The filler weeks stand for days nothing was measured for.
+		expect( data[ 0 ].data.every( cell => cell.placeholder === true ) ).toBe( true );
+		expect( data[ 3 ].data.every( cell => cell.placeholder === true ) ).toBe( true );
+
+		// The data week is untouched: real values, no placeholder flag.
+		expect( data[ 4 ].data[ 0 ] ).toMatchObject( { value: 3 } );
+		expect( data[ 4 ].data[ 0 ].placeholder ).toBeUndefined();
+		expect( data[ 4 ].data[ 6 ] ).toMatchObject( { value: 4 } );
+	} );
+
+	test( 'labels the filler columns so the grid still reads as a calendar', () => {
+		const { data } = buildCalendarHeatmapData( oneWeek, {
+			weekStartsOn: 1,
+			gridSpan: { start: '2023-12-04' },
+		} );
+
+		expect( data.map( column => column.label ) ).toEqual( [ 'Dec', '', '', '', 'Jan' ] );
+	} );
+
+	test( 'ignores a bound that would cut into the series', () => {
+		const { data } = buildCalendarHeatmapData( oneWeek, {
+			weekStartsOn: 1,
+			gridSpan: { start: '2024-01-04', end: '2024-01-05' },
+		} );
+
+		expect( data ).toHaveLength( 1 );
+		expect( data[ 0 ].data[ 0 ].value ).toBe( 3 );
+		expect( data[ 0 ].data[ 6 ].value ).toBe( 4 );
+	} );
+
+	test( 'falls back to the series span for an unparseable bound', () => {
+		const { data } = buildCalendarHeatmapData( oneWeek, {
+			weekStartsOn: 1,
+			gridSpan: { start: 'not-a-date' },
+		} );
+
+		expect( data ).toHaveLength( 1 );
+	} );
+
+	test( 'separates the ragged edge from the filler', () => {
+		// The grid opens Mon Dec 25 and closes with the series on Wed Jan 3, so
+		// Thu Jan 4 onward only completes the last week.
+		const { data } = buildCalendarHeatmapData( [ { dateString: '2024-01-03', value: 5 } ], {
+			weekStartsOn: 1,
+			gridSpan: { start: '2023-12-25' },
+		} );
+
+		const lastColumn = data[ data.length - 1 ];
+
+		// Inside the requested grid, before the data: filler.
+		expect( lastColumn.data[ 0 ].placeholder ).toBe( true );
+		expect( lastColumn.data[ 0 ].hidden ).toBeUndefined();
+
+		expect( lastColumn.data[ 2 ].value ).toBe( 5 );
+
+		// Past the grid's end: the calendar's ragged edge, painted as nothing.
+		expect( lastColumn.data[ 3 ].hidden ).toBe( true );
+		expect( lastColumn.data[ 3 ].placeholder ).toBeUndefined();
+	} );
+
+	test( 'is a no-op when no grid span is given', () => {
+		expect( buildCalendarHeatmapData( oneWeek, { weekStartsOn: 1 } ) ).toEqual(
+			buildCalendarHeatmapData( oneWeek, { weekStartsOn: 1, gridSpan: {} } )
+		);
+	} );
+
+	// The caller sizes the grid in whole weeks back from the period's last day, so
+	// the bound lands on that weekday — a Monday only one year in seven.
+	test( 'opens on a whole column when the start bound falls mid-week', () => {
+		const { data } = buildCalendarHeatmapData( oneWeek, {
+			weekStartsOn: 1,
+			gridSpan: { start: '2023-12-07' }, // a Thursday
+		} );
+
+		expect( data ).toHaveLength( 5 );
+
+		// Mon Dec 4 through Wed Dec 6 precede the bound; they are as unmeasured as
+		// the rest of the filler, so they fill the column rather than notching it.
+		expect( data[ 0 ].data.every( cell => cell.placeholder === true ) ).toBe( true );
+		expect( data[ 0 ].data.some( cell => cell.hidden ) ).toBe( false );
+	} );
+
+	test( 'still draws the ragged edge past the grid end', () => {
+		// Wed Jan 3 ends the series, so Thu Jan 4 onward only completes the week.
+		const { data } = buildCalendarHeatmapData( [ { dateString: '2024-01-03', value: 5 } ], {
+			weekStartsOn: 1,
+			gridSpan: { start: '2023-12-20' }, // a Wednesday
+		} );
+
+		expect( data[ 0 ].data.every( cell => cell.placeholder === true ) ).toBe( true );
+
+		const lastColumn = data[ data.length - 1 ];
+		expect( lastColumn.data[ 2 ].value ).toBe( 5 );
+		expect( lastColumn.data[ 3 ].hidden ).toBe( true );
+	} );
+
+	test( 'keeps the ragged start edge when the bound is ignored', () => {
+		// A narrowing bound never applies, so the series' own first week stays
+		// ragged rather than being filled out.
+		const { data } = buildCalendarHeatmapData( [ { dateString: '2024-01-03', value: 5 } ], {
+			weekStartsOn: 1,
+			gridSpan: { start: '2024-01-05' },
+		} );
+
+		expect( data ).toHaveLength( 1 );
+		expect( data[ 0 ].data[ 0 ].hidden ).toBe( true );
+		expect( data[ 0 ].data[ 0 ].placeholder ).toBeUndefined();
+	} );
+} );

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

@@ -13,6 +13,14 @@ export type HeatmapCell = {
 	 * days completing the first/last week fall outside the covered range.
 	 */
 	hidden?: boolean;
+	/**
+	 * Paint the cell as a faded empty slot that carries no claim about the day:
+	 * it is set apart from a measured day that scored zero, and skipped by
+	 * hover, tooltips, keyboard navigation and the accessibility tree. For grid
+	 * filler — slots drawn only so a short range still fills its container,
+	 * which were never measured.
+	 */
+	placeholder?: boolean;
 };
 
 /** A heatmap column (rendered left→right); its cells render top→bottom. */

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

@@ -17,8 +17,9 @@ import {
 } from '../../providers';
 import { formatMetricValue, attachSubComponents } from '../../utils';
 import { useChartChildren } from '../private/chart-composition';
+import { ChartInstanceContext } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
-import { SingleChartContext } from '../private/single-chart-context';
+import { getAllHiddenMessage } from '../private/svg-empty-state';
 import { withResponsive } from '../private/with-responsive';
 import { useFittedRowCount, useLeaderboardLegendItems } from './hooks';
 import styles from './leaderboard-chart.module.scss';
@@ -225,35 +226,28 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 		legendLabels,
 	} );
 
-	// Track visibility of primary and comparison series for interactive legends
+	// Track visibility of primary and comparison series from the shared legend state.
 	const isPrimaryVisible = useMemo( () => {
-		if ( ! chartId || ! legendInteractive || legendItems.length === 0 ) {
+		if ( legendItems.length === 0 ) {
 			return true;
 		}
 		return isSeriesVisible( chartId, legendItems[ 0 ].label );
-	}, [ chartId, legendInteractive, legendItems, isSeriesVisible ] );
+	}, [ chartId, legendItems, isSeriesVisible ] );
 
 	const isComparisonVisible = useMemo( () => {
-		if ( ! chartId || ! legendInteractive || legendItems.length < 2 ) {
+		if ( legendItems.length < 2 ) {
 			return true;
 		}
 		return isSeriesVisible( chartId, legendItems[ 1 ].label );
-	}, [ chartId, legendInteractive, legendItems, isSeriesVisible ] );
+	}, [ chartId, legendItems, isSeriesVisible ] );
 
 	// Check if all series are hidden
 	const allSeriesHidden = useMemo( () => {
-		if ( ! legendInteractive ) return false;
 		if ( withComparison && ! withOverlayLabel ) {
 			return ! isPrimaryVisible && ! isComparisonVisible;
 		}
 		return ! isPrimaryVisible;
-	}, [
-		legendInteractive,
-		isPrimaryVisible,
-		isComparisonVisible,
-		withComparison,
-		withOverlayLabel,
-	] );
+	}, [ isPrimaryVisible, isComparisonVisible, withComparison, withOverlayLabel ] );
 
 	// Validate data
 	const isDataValid = Boolean( data && data.length > 0 );
@@ -278,9 +272,10 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 
 	const prefersReducedMotion = usePrefersReducedMotion();
 
-	// There are no rows to measure while an interactive legend has hidden every
-	// series. Pausing fitting restores the full row count and, when a series is shown
-	// again, re-runs the effect against the newly mounted grid.
+	// There are no rows to measure while every series is hidden, whether from an
+	// interactive legend click or a programmatic toggle. Pausing fitting restores
+	// the full row count and, when a series is shown again, re-runs the effect
+	// against the newly mounted grid.
 	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(
 		fitRows && ! allSeriesHidden,
 		data?.length ?? 0,
@@ -291,7 +286,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	// Handle empty or undefined data
 	if ( ! data || data.length === 0 ) {
 		return (
-			<SingleChartContext.Provider value={ { chartId } }>
+			<ChartInstanceContext.Provider value={ { chartId } }>
 				<ChartLayout
 					legendPosition={ legendPosition }
 					legendElement={ false }
@@ -315,7 +310,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 							: __( 'No data available', 'jetpack-charts' ) }
 					</div>
 				</ChartLayout>
-			</SingleChartContext.Provider>
+			</ChartInstanceContext.Provider>
 		);
 	}
 
@@ -335,7 +330,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	);
 
 	return (
-		<SingleChartContext.Provider value={ { chartId } }>
+		<ChartInstanceContext.Provider value={ { chartId } }>
 			<ChartLayout
 				legendPosition={ legendPosition }
 				legendElement={ legendElement }
@@ -372,7 +367,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					) }
 					{ allSeriesHidden ? (
 						<div className={ styles.emptyState }>
-							{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }
+							{ getAllHiddenMessage( legendInteractive, 'series' ) }
 						</div>
 					) : (
 						<Grid
@@ -476,7 +471,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					) }
 				</div>
 			</ChartLayout>
-		</SingleChartContext.Provider>
+		</ChartInstanceContext.Provider>
 	);
 };
 

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

@@ -1,6 +1,9 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { GlobalChartsProvider } from '../../../providers';
+import { useGlobalChartsContext } from '../../../providers/chart-context/hooks/use-global-charts-context';
 import LeaderboardChart from '../leaderboard-chart';
+import type { GlobalChartsContextValue } from '../../../providers/chart-context/types';
 import type { LeaderboardEntry } from '../../../types';
 
 const mockDefaultParentSize = () => ( {
@@ -418,6 +421,109 @@ describe( 'LeaderboardChart', () => {
 		} );
 	} );
 
+	describe( 'Programmatic visibility', () => {
+		it( 'hides the primary series programmatically when the legend is not interactive', () => {
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<LeaderboardChart
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-programmatic-leaderboard"
+						data={ mockData }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const primaryLabel = screen.getAllByTestId( 'legend-item' )[ 0 ].textContent;
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-programmatic-leaderboard', primaryLabel );
+			} );
+
+			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 />
+					<LeaderboardChart
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-empty-copy-leaderboard"
+						data={ mockData }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const primaryLabel = screen.getAllByTestId( 'legend-item' )[ 0 ].textContent;
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-empty-copy-leaderboard', primaryLabel );
+			} );
+
+			expect( screen.getByText( 'All series are hidden.' ) ).toBeInTheDocument();
+			expect( screen.queryByText( /click legend items/i ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'still renders the primary series when only the comparison is hidden programmatically', () => {
+			// Hiding every series routes through allSeriesHidden to the empty state and
+			// never exercises the per-series render path. Hiding only the comparison
+			// series exercises that path for the leaderboard's primary/comparison split.
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<LeaderboardChart
+						width={ 500 }
+						height={ 300 }
+						showLegend={ true }
+						withComparison={ true }
+						legend={ { interactive: false } }
+						chartId="test-programmatic-comparison-leaderboard"
+						data={ mockData }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const comparisonLabel = screen.getAllByTestId( 'legend-item' )[ 1 ].textContent;
+
+			act( () => {
+				context.toggleSeriesVisibility(
+					'test-programmatic-comparison-leaderboard',
+					comparisonLabel
+				);
+			} );
+
+			expect( screen.queryByText( /all series are hidden/i ) ).not.toBeInTheDocument();
+			expect( screen.getByText( 'Direct' ) ).toBeInTheDocument();
+			expect( screen.getByText( '12.5K' ) ).toBeInTheDocument();
+			expect( screen.queryByText( '+25%' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
 	describe( 'Responsive wrapper', () => {
 		it( 'applies explicit width and height to chart container', () => {
 			const { useParentSize } = jest.requireMock( '@visx/responsive' );

package/src/charts/line-chart/line-chart.module.scss

@@ -25,7 +25,7 @@
 	}
 
 	&__tooltip-date {
-		font-weight: var(--wpds-typography-font-weight-emphasis, 499);
+		font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 		padding-bottom: var(--wpds-dimension-padding-md, 12px);
 	}
 
@@ -34,7 +34,7 @@
 	}
 
 	&__tooltip-label {
-		font-weight: var(--wpds-typography-font-weight-emphasis, 499);
+		font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 		padding-right: var(--wpds-dimension-padding-lg, 16px);
 	}
 

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

@@ -29,12 +29,13 @@ import {
 	useGlobalChartsContext,
 	useGlobalChartsTheme,
 } from '../../providers';
+import { useDefaultHiddenSeries } from '../../providers/chart-context/hooks/use-default-hidden-series';
 import { attachSubComponents } from '../../utils';
 import { useChartChildren } from '../private/chart-composition';
+import { ChartInstanceContext, type ChartInstanceRef } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
 import { DefaultGlyph } from '../private/default-glyph';
-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';
@@ -119,7 +120,7 @@ const validateData = ( data: SeriesData[] ) => {
 
 // Inner component to access DataContext and provide scale data to ref
 const LineChartScalesRef: FC< {
-	chartRef?: Ref< SingleChartRef >;
+	chartRef?: Ref< ChartInstanceRef >;
 	width: number;
 	height: number;
 	margin?: { top?: number; right?: number; bottom?: number; left?: number };
@@ -150,7 +151,7 @@ const LineChartScalesRef: FC< {
 	return null; // This component only provides the ref interface
 };
 
-const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
+const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 	(
 		{
 			data,
@@ -180,6 +181,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 			onPointerOut = undefined,
 			zoomable = false,
 			rescaleYOnVisibilityChange = true,
+			defaultHiddenSeries,
 			children,
 			gridVisibility,
 			gap = 'md',
@@ -196,10 +198,15 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		// Gradient stops apply this as an SVG attribute, where CSS var() cannot resolve. useXYChartTheme has already resolved the same role inside its memo, against the chart's scope element, so read it back rather than paying another getComputedStyle on every render.
 		const resolvedBackgroundColor = theme.backgroundColor ?? providerTheme.backgroundColor;
 		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,
@@ -233,31 +240,30 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		);
 
 		const dataSorted = useChartDataTransform( data );
-		const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+		const { getElementStyles } = useGlobalChartsContext();
 
-		// Add visibility information to series when using interactive legends
+		// Series visibility is owned by the provider, so it applies whether it changed
+		// through the interactive legend or programmatically.
 		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 ] );
 
 		// Check if all series are hidden
 		const allSeriesHidden = useMemo( () => {
 			return seriesWithVisibility.every( ( { isVisible } ) => ! isVisible );
 		}, [ seriesWithVisibility ] );
 
-		// When the interactive legend can hide series and rescaling is opted out, pin the value axis
-		// to the full data range so it stays put as series are toggled instead of visx rescaling the
-		// domain to whatever is currently visible and making the axis jump. Default is to rescale,
-		// matching the pre-existing behaviour and AreaChart's `rescaleYOnVisibilityChange`.
+		// When series visibility changes — via the interactive legend or programmatically —
+		// and rescaling is opted out, pin the value axis to the full data range so it stays
+		// put instead of visx rescaling the domain to whatever is currently visible and
+		// making the axis jump. Default is to rescale, matching the pre-existing behaviour
+		// and AreaChart's `rescaleYOnVisibilityChange`.
 		const stableYDomain = useMemo< [ number, number ] | undefined >( () => {
-			if ( ! legendInteractive || rescaleYOnVisibilityChange ) {
+			if ( rescaleYOnVisibilityChange ) {
 				return undefined;
 			}
 			let min = Infinity;
@@ -272,7 +278,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 				}
 			}
 			return min < max ? [ min, max ] : undefined;
-		}, [ legendInteractive, rescaleYOnVisibilityChange, dataSorted ] );
+		}, [ rescaleYOnVisibilityChange, dataSorted ] );
 
 		// Use the keyboard navigation hook
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
@@ -412,10 +418,11 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		);
 
 		return (
-			<SingleChartContext.Provider
+			<ChartInstanceContext.Provider
 				value={ {
 					chartId,
 					chartRef: internalChartRef,
+					isSeriesVisible,
 					chartWidth: width,
 					chartHeight: measuredChartHeight || 0,
 				} }
@@ -489,10 +496,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 													width={ width }
 													height={ chartHeight }
 												>
-													{ __(
-														'All series are hidden. Click legend items to show data.',
-														'jetpack-charts'
-													) }
+													{ getAllHiddenMessage( legendInteractive, 'series' ) }
 												</SvgEmptyState>
 											) : null }
 
@@ -619,7 +623,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 						);
 					} }
 				</ChartLayout>
-			</SingleChartContext.Provider>
+			</ChartInstanceContext.Provider>
 		);
 	}
 );
@@ -634,16 +638,16 @@ type LineChartAnnotationComponents = {
 type LineChartBaseProps = Optional< LineChartProps, 'width' | 'height' | 'size' >;
 
 type LineChartComponent = React.ForwardRefExoticComponent<
-	LineChartBaseProps & React.RefAttributes< SingleChartRef >
+	LineChartBaseProps & React.RefAttributes< ChartInstanceRef >
 > &
 	LineChartAnnotationComponents;
 
 type LineChartResponsiveComponent = React.ForwardRefExoticComponent<
-	LineChartBaseProps & ResponsiveConfig & React.RefAttributes< SingleChartRef >
+	LineChartBaseProps & ResponsiveConfig & React.RefAttributes< ChartInstanceRef >
 > &
 	LineChartAnnotationComponents;
 
-const LineChartWithProvider = forwardRef< SingleChartRef, LineChartProps >( ( props, ref ) => {
+const LineChartWithProvider = forwardRef< ChartInstanceRef, LineChartProps >( ( props, ref ) => {
 	const existingContext = useContext( GlobalChartsContext );
 
 	// If we're already in a GlobalChartsProvider context, render the core component directly

package/src/charts/line-chart/private/line-chart-annotations-overlay.tsx

@@ -1,6 +1,6 @@
 import { DataContext } from '@visx/xychart';
 import { useEffect, useState, useCallback } from 'react';
-import { useSingleChartContext } from '../../private/single-chart-context';
+import { useChartInstanceContext } from '../../private/chart-instance-context';
 import styles from '../line-chart.module.scss';
 import type { AxisScale } from '@visx/axis';
 import type { FC, ReactNode } from 'react';
@@ -15,7 +15,7 @@ interface ScaleData {
 }
 
 const LineChartAnnotationsOverlay: FC< LineChartAnnotationsProps > = ( { children } ) => {
-	const { chartRef, chartWidth, chartHeight } = useSingleChartContext();
+	const { chartRef, chartWidth, chartHeight } = useChartInstanceContext();
 
 	const [ scales, setScales ] = useState< ScaleData | null >( null );
 	const [ scalesStable, setScalesStable ] = useState< boolean >( false );