@automattic/charts 3.1.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "3.1.0",
+	"version": "3.2.0",
 	"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.7",
+		"@automattic/number-formatters": "^1.2.8",
 		"@babel/runtime": "7.29.7",
 		"@react-spring/web": "10.1.1",
 		"@visx/annotation": "^4.0.0",
@@ -84,8 +84,8 @@
 		"@visx/xychart": "^4.0.0",
 		"@wordpress/i18n": "^6.0.0",
 		"@wordpress/icons": "^15.0.0",
-		"@wordpress/theme": "1.1.0",
-		"@wordpress/ui": "0.19.0",
+		"@wordpress/theme": "1.2.0",
+		"@wordpress/ui": "0.20.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -103,16 +103,16 @@
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
 		"@testing-library/user-event": "^14.4.3",
-		"@tsdown/css": "0.22.2",
+		"@tsdown/css": "0.22.14",
 		"@types/jest": "^30.0.0",
 		"@types/node": "^24.12.0",
-		"@types/react": "18.3.28",
+		"@types/react": "18.3.31",
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"@visx/glyph": "4.0.0",
 		"@wordpress/components": "37.0.0",
 		"@wordpress/element": "8.3.0",
-		"@wordpress/private-apis": "1.52.0",
+		"@wordpress/private-apis": "1.53.0",
 		"babel-jest": "30.4.1",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.4.2",
@@ -122,7 +122,7 @@
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
 		"storybook": "10.4.6",
-		"tsdown": "0.22.2",
+		"tsdown": "0.22.14",
 		"typescript": "6.0.3"
 	},
 	"peerDependencies": {

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

@@ -205,8 +205,8 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 		}, [ 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: {

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

@@ -112,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();

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

@@ -128,6 +128,9 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	animation,
 	children,
 	gap = 'md',
+	onPointerDown,
+	onPointerUp,
+	onDatumActivate,
 } ) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
@@ -196,16 +199,6 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		Math.max( 0, ...primarySeriesForNav.map( s => s.data?.length || 0 ) ) *
 		primarySeriesForNav.length;
 
-	// Use the keyboard navigation hook
-	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
-		selectedIndex,
-		setSelectedIndex,
-		isNavigating,
-		setIsNavigating,
-		chartRef,
-		totalPoints,
-	} );
-
 	// Add visibility information from the shared legend state.
 	const seriesWithVisibility = useMemo(
 		() =>
@@ -244,6 +237,37 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ primaryEntries ]
 	);
 
+	// Walks the selected index the way the highlight style does — series-major
+	// within each data point — so the bar handed on is the one outlined.
+	const activateSelectedBar = useCallback(
+		( index: number ) => {
+			const primaryCount = primaryEntries.length;
+
+			if ( ! primaryCount ) {
+				return;
+			}
+
+			const dataPointIndex = Math.floor( index / primaryCount );
+			const series = primaryEntries[ index % primaryCount ]?.series;
+			const datum = series?.data[ dataPointIndex ];
+
+			if ( series && datum ) {
+				onDatumActivate?.( { datum, index: dataPointIndex, key: series.label } );
+			}
+		},
+		[ primaryEntries, onDatumActivate ]
+	);
+
+	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
+		selectedIndex,
+		setSelectedIndex,
+		isNavigating,
+		setIsNavigating,
+		chartRef,
+		totalPoints,
+		onActivate: activateSelectedBar,
+	} );
+
 	const comparisonEntries = useMemo( () => {
 		const primaryByGroup = new Map< string | undefined, { label: string; index: number } >(
 			primaryEntries.map( ( { series, index } ) => [
@@ -575,6 +599,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										xScale={ xScale }
 										yScale={ yScale }
 										horizontal={ horizontal }
+										onPointerDown={ onPointerDown }
+										onPointerUp={ onPointerUp }
 										pointerEventsDataKey="nearest"
 									>
 										{ ! allSeriesHidden && (

package/src/charts/bar-chart/private/use-bar-chart-options.ts

@@ -154,23 +154,29 @@ export function useBarChartOptions(
 	const stableOptions = useDeepMemo( options );
 
 	// `labelOverflow` and `tickResolution` are consumed by this hook rather than
-	// forwarded — visx has an axis prop for neither — so they are split off the
-	// caller's axis options once, here, and only the rest reaches visx below.
+	// forwarded — visx has an axis prop for neither — and `tickFormat` is merged
+	// with the derived default explicitly, so an `undefined` passed by a caller
+	// cannot clobber it through the spread. They are split off the caller's axis
+	// options once, here, and only the rest reaches visx below.
 	const axisConfig = useMemo( () => {
 		const {
 			labelOverflow: xLabelOverflow,
 			tickResolution: xTickResolution,
+			tickFormat: xTickFormat,
 			...xAxisOptions
 		} = stableOptions.axis?.x || {};
 		const {
 			labelOverflow: yLabelOverflow,
 			tickResolution: yTickResolution,
+			tickFormat: yTickFormat,
 			...yAxisOptions
 		} = stableOptions.axis?.y || {};
 
 		return {
 			xLabelOverflow,
 			yLabelOverflow,
+			xTickFormat,
+			yTickFormat,
 			xAxisOptions,
 			yAxisOptions,
 			// The dates sit on the x axis normally, and on the y axis when the
@@ -243,8 +249,8 @@ export function useBarChartOptions(
 	return useMemo( () => {
 		const orientationKey = horizontal ? 'horizontal' : 'vertical';
 		const {
-			xTickFormat,
-			yTickFormat,
+			xTickFormat: defaultXTickFormat,
+			yTickFormat: defaultYTickFormat,
 			tooltipLabelFormatter: defaultTooltipLabelFormatter,
 			xAccessor,
 			yAccessor,
@@ -294,10 +300,11 @@ export function useBarChartOptions(
 			...( stableOptions.yScale || {} ),
 			...( ! horizontal ? valueScaleDomainOverride : {} ),
 		};
-		const { xLabelOverflow, yLabelOverflow, xAxisOptions, yAxisOptions } = axisConfig;
-		const providedToolTipLabelFormatter = horizontal
-			? yAxisOptions.tickFormat
-			: xAxisOptions.tickFormat;
+		const { xLabelOverflow, yLabelOverflow, xTickFormat, yTickFormat, xAxisOptions, yAxisOptions } =
+			axisConfig;
+		// The dates sit on the y axis of a horizontal chart, so the caller's format
+		// for them moves with the orientation. It also labels the tooltip.
+		const dateAxisTickFormat = horizontal ? yTickFormat : xTickFormat;
 
 		// A band scale has no ticks of its own for visx to ask for, so it samples
 		// the domain by index and can miss the tick that dates the day or names the
@@ -306,7 +313,7 @@ export function useBarChartOptions(
 		const { timeAxis } = defaultOptions;
 		const dateAxisOptions = horizontal ? yAxisOptions : xAxisOptions;
 		const bandTickValues =
-			timeAxis && ! dateAxisOptions.tickFormat
+			timeAxis && ! dateAxisTickFormat
 				? getBandTickValues(
 						timeAxis.domain,
 						timeAxis.tickFormatter,
@@ -327,7 +334,7 @@ export function useBarChartOptions(
 				x: {
 					orientation: 'bottom' as const,
 					numTicks: DEFAULT_NUM_TICKS,
-					tickFormat: xTickFormat,
+					tickFormat: xTickFormat || defaultXTickFormat,
 					...( horizontal ? {} : dateAxisTickValues ),
 					...( xLabelOverflow === 'ellipsis' ? { tickComponent: TruncatedXTickComponent } : {} ),
 					...xAxisOptions,
@@ -335,7 +342,7 @@ export function useBarChartOptions(
 				y: {
 					orientation: 'left' as const,
 					numTicks: DEFAULT_NUM_TICKS,
-					tickFormat: yTickFormat,
+					tickFormat: yTickFormat || defaultYTickFormat,
 					...( horizontal ? dateAxisTickValues : {} ),
 					...( yLabelOverflow === 'ellipsis' ? { tickComponent: TruncatedYTickComponent } : {} ),
 					...yAxisOptions,
@@ -345,7 +352,7 @@ export function useBarChartOptions(
 				padding: getGroupPadding( horizontal ? yScale : xScale ),
 			},
 			tooltip: {
-				labelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter,
+				labelFormatter: dateAxisTickFormat || defaultTooltipLabelFormatter,
 			},
 		};
 	}, [ defaultOptions, axisConfig, stableOptions, horizontal, data ] );

package/src/charts/bar-chart/test/bar-chart-pointer-events.test.tsx

@@ -0,0 +1,67 @@
+import { render } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../../providers';
+import BarChart from '../bar-chart';
+import type { ReactNode } from 'react';
+
+// jsdom gives every element a zero-sized box, so visx can never resolve a
+// pointer to a datum here. Standing `XYChart` in for a prop recorder keeps this
+// test on the part jsdom can answer: that the handlers reach the chart at all.
+// Whether a bar then reports the datum under the pointer is a browser question.
+const mockXYChart = jest.fn();
+jest.mock( '@visx/xychart', () => {
+	const actual = jest.requireActual( '@visx/xychart' );
+
+	return {
+		__esModule: true,
+		...actual,
+		XYChart: ( props: { children?: ReactNode } ) => {
+			mockXYChart( props );
+			return <svg />;
+		},
+	};
+} );
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+const DATA = [
+	{
+		label: 'Series A',
+		data: [
+			{ date: new Date( '2024-01-01' ), value: 10 },
+			{ date: new Date( '2024-01-02' ), value: 20 },
+		],
+		options: {},
+	},
+];
+
+/**
+ * Render the chart with the recorder standing in for `XYChart`.
+ *
+ * @param props - Props layered onto the defaults.
+ * @return The render result.
+ */
+function renderBarChart( props = {} ) {
+	return render(
+		<GlobalChartsProvider>
+			<BarChart width={ 500 } height={ 300 } data={ DATA } { ...props } />
+		</GlobalChartsProvider>
+	);
+}
+
+describe( 'BarChart pointer events', () => {
+	beforeEach( () => mockXYChart.mockClear() );
+
+	test( 'hands the pointer handlers to the chart, so a bar can be clicked', () => {
+		const onPointerDown = jest.fn();
+		const onPointerUp = jest.fn();
+
+		renderBarChart( { onPointerDown, onPointerUp } );
+
+		const props = mockXYChart.mock.calls.at( -1 )[ 0 ];
+		expect( props.onPointerDown ).toBe( onPointerDown );
+		expect( props.onPointerUp ).toBe( onPointerUp );
+	} );
+} );

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

@@ -505,6 +505,28 @@ describe( 'BarChart', () => {
 			expect( distinctTexts( ticks ).size ).toBeGreaterThan( 1 );
 		} );
 
+		test( 'keeps the derived date formatter when tickFormat is passed as undefined', () => {
+			renderWithTheme( {
+				width: 800,
+				options: { axis: { x: { tickFormat: undefined } } },
+				data: [
+					{
+						label: 'Series A',
+						data: Array.from( { length: 14 }, ( _, i ) => ( {
+							date: new Date( 2024, 0, 1 + i ),
+							value: 10 + i,
+						} ) ),
+						options: {},
+					},
+				],
+			} );
+
+			const ticks = screen.getAllByText( /^Jan \d+$/ );
+			expect( distinctTexts( ticks ).size ).toBeGreaterThan( 1 );
+			// A clobbered formatter falls back to raw `Date.toString()` ticks.
+			expect( screen.queryByText( /GMT/ ) ).not.toBeInTheDocument();
+		} );
+
 		test( 'renders distinct hour ticks for sub-daily buckets in a single day', () => {
 			renderWithTheme( {
 				width: 800,
@@ -974,6 +996,85 @@ describe( 'BarChart', () => {
 			} );
 		} );
 
+		describe( 'Activation', () => {
+			const SERIES_A = {
+				label: 'Series A',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 10 },
+					{ date: new Date( '2024-01-02' ), value: 20 },
+				],
+				options: {},
+			};
+			const SERIES_B = {
+				label: 'Series B',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 15 },
+					{ date: new Date( '2024-01-02' ), value: 25 },
+				],
+				options: {},
+			};
+
+			test( 'Enter hands the selected bar to onDatumActivate', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { withTooltips: true, data: [ SERIES_A ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}{ArrowRight}{Enter}' );
+
+				expect( onDatumActivate ).toHaveBeenCalledTimes( 1 );
+				expect( onDatumActivate ).toHaveBeenCalledWith( {
+					datum: SERIES_A.data[ 1 ],
+					index: 1,
+					key: 'Series A',
+				} );
+			} );
+
+			test( 'Space activates the selected bar too', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { withTooltips: true, data: [ SERIES_A ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}[Space]' );
+
+				expect( onDatumActivate ).toHaveBeenCalledWith( {
+					datum: SERIES_A.data[ 0 ],
+					index: 0,
+					key: 'Series A',
+				} );
+			} );
+
+			// The navigation index strides series-major within each data point, the
+			// order the highlight outlines bars in, so the second stop is the second
+			// series' first bar.
+			test( 'walks the series at each data point before the next point', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { withTooltips: true, data: [ SERIES_A, SERIES_B ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}{ArrowRight}{Enter}' );
+
+				expect( onDatumActivate ).toHaveBeenCalledWith( {
+					datum: SERIES_B.data[ 0 ],
+					index: 0,
+					key: 'Series B',
+				} );
+			} );
+
+			test( 'Enter with no bar selected activates nothing', async () => {
+				const user = userEvent.setup();
+				const onDatumActivate = jest.fn();
+				renderWithTheme( { withTooltips: true, data: [ SERIES_A ], onDatumActivate } );
+
+				screen.getByRole( 'grid', { name: /bar chart/i } ).focus();
+				await user.keyboard( '{Enter}' );
+
+				expect( onDatumActivate ).not.toHaveBeenCalled();
+			} );
+		} );
+
 		describe( 'Arrow Key Navigation', () => {
 			test( 'right arrow key navigates to next data point', async () => {
 				const user = userEvent.setup();

package/src/charts/bar-list-chart/bar-list-chart.tsx

@@ -3,7 +3,8 @@ import { Group } from '@visx/group';
 import { createScale, scaleBand } from '@visx/scale';
 import { Text, type TextProps } from '@visx/text';
 import { useContext, useMemo } from 'react';
-import { GlobalChartsContext, GlobalChartsProvider } from '../../providers';
+import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';
+import { isValidHexColor, lightenHexColor } from '../../utils';
 import { BarChartUnresponsive } from '../bar-chart';
 import { withResponsive } from '../private/with-responsive';
 import type { SeriesData } from '../..';
@@ -211,6 +212,14 @@ const getDefaultYOffset = (
 	return -( barThickness + GAP_BETWEEN_BARS );
 };
 
+// How far a single-series bar fill travels from white toward the series color.
+//
+// With one series the label is drawn *on* the bar, so the fill is a text background and has to keep
+// contrast with `--a8c-charts-color-label`. At full strength the catalog seed `#3858e9` leaves
+// `#1e1e1e` at 2.97:1; this puts it at 9.0:1. Multi-series bars keep full strength — the label is
+// lifted clear of them, so nothing is read against the fill.
+const BAR_TINT_TOWARD_SERIES = 0.4;
+
 const BarListChartInternal: FC< BarListChartProps > = ( {
 	data,
 	width,
@@ -224,6 +233,35 @@ const BarListChartInternal: FC< BarListChartProps > = ( {
 	},
 	...rest
 } ) => {
+	const { getElementStyles } = useGlobalChartsContext();
+
+	// A series carrying its own stroke is left alone — the consumer asked for that exact color.
+	const tintedData = useMemo( () => {
+		if ( data.length > 1 ) {
+			return data;
+		}
+
+		return data.map( ( series, index ) => {
+			if ( series.options?.stroke ) {
+				return series;
+			}
+
+			const { color } = getElementStyles( { data: series, index } );
+
+			if ( ! isValidHexColor( color ) ) {
+				return series;
+			}
+
+			return {
+				...series,
+				options: {
+					...series.options,
+					stroke: lightenHexColor( color, 1 - BAR_TINT_TOWARD_SERIES ),
+				},
+			};
+		} );
+	}, [ data, getElementStyles ] );
+
 	const chartOptions = useMemo( () => {
 		const isMultiSeries = data.length > 1;
 
@@ -260,7 +298,7 @@ const BarListChartInternal: FC< BarListChartProps > = ( {
 		<BarChartUnresponsive
 			orientation="horizontal"
 			gridVisibility={ 'none' }
-			data={ data }
+			data={ tintedData }
 			width={ width }
 			height={ height }
 			margin={ margin }

package/src/charts/bar-list-chart/test/bar-list-chart.test.tsx

@@ -66,4 +66,42 @@ describe( 'BarListChart', () => {
 		renderChart( { data: [] } );
 		expect( screen.queryByText( 'Behemoth hat ' ) ).not.toBeInTheDocument();
 	} );
+
+	describe( 'single-series bar tint', () => {
+		// visx renders the bars, so they carry no attribute of our own to query by.
+		/* eslint-disable testing-library/no-node-access */
+		const barFills = () =>
+			Array.from(
+				screen.getByRole( 'grid' ).querySelectorAll< SVGRectElement >( '.visx-bar-group rect' )
+			).map( bar => bar.getAttribute( 'fill' ) );
+		/* eslint-enable testing-library/no-node-access */
+
+		// `lightenHexColor( '#3858e9', 1 - BAR_TINT_TOWARD_SERIES )` — the catalog seed traveling
+		// 40% from white toward the series color. Asserted as a literal so a change to the tint has
+		// to be made deliberately here rather than tracking the implementation.
+		const TINTED_SEED = '#afbcf6';
+
+		test( 'tints the bar so the label it carries stays readable', () => {
+			renderChart();
+			expect( barFills() ).not.toHaveLength( 0 );
+			barFills().forEach( fill => expect( fill ).toBe( TINTED_SEED ) );
+		} );
+
+		test( 'leaves a series carrying its own stroke at full strength', () => {
+			renderChart( {
+				data: salesByProduct.map( series => ( {
+					...series,
+					options: { ...series.options, stroke: '#ff0000' },
+				} ) ),
+			} );
+			expect( barFills() ).not.toHaveLength( 0 );
+			barFills().forEach( fill => expect( fill ).toBe( '#ff0000' ) );
+		} );
+
+		test( 'leaves multi-series bars at full strength, where the label is lifted clear', () => {
+			renderChart( { data: salesByChannel } );
+			expect( barFills() ).not.toHaveLength( 0 );
+			expect( barFills() ).not.toContain( TINTED_SEED );
+		} );
+	} );
 } );

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

@@ -179,6 +179,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			onPointerUp = undefined,
 			onPointerMove = undefined,
 			onPointerOut = undefined,
+			onDatumActivate = undefined,
 			zoomable = false,
 			rescaleYOnVisibilityChange = true,
 			defaultHiddenSeries,
@@ -280,7 +281,20 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			return min < max ? [ min, max ] : undefined;
 		}, [ rescaleYOnVisibilityChange, dataSorted ] );
 
-		// Use the keyboard navigation hook
+		// Keyboard navigation steps through x positions, and the grouped tooltip
+		// reads every series at that position; the first series names the point.
+		const activateSelectedPoint = useCallback(
+			( index: number ) => {
+				const series = dataSorted[ 0 ];
+				const datum = series?.data[ index ];
+
+				if ( series && datum ) {
+					onDatumActivate?.( { datum, index, key: series.label } );
+				}
+			},
+			[ dataSorted, onDatumActivate ]
+		);
+
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
 			selectedIndex,
 			setSelectedIndex,
@@ -288,11 +302,12 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			setIsNavigating,
 			chartRef,
 			totalPoints: dataSorted[ 0 ]?.data.length || 0,
+			onActivate: activateSelectedPoint,
 		} );
 
 		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: {