@automattic/charts 1.3.1 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.3.1",
+	"version": "1.4.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.1.7",
+		"@automattic/number-formatters": "^1.1.8",
 		"@babel/runtime": "7.29.2",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -99,8 +99,8 @@
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@babel/preset-typescript": "7.28.5",
-		"@storybook/addon-docs": "10.3.5",
-		"@storybook/react": "10.3.5",
+		"@storybook/addon-docs": "10.3.6",
+		"@storybook/react": "10.3.6",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -121,12 +121,12 @@
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.3.0",
 		"jest-extended": "7.0.0",
-		"postcss": "8.5.10",
+		"postcss": "8.5.14",
 		"postcss-modules": "6.0.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
-		"storybook": "10.3.5",
+		"storybook": "10.3.6",
 		"tsup": "8.5.1",
 		"typescript": "5.9.3"
 	},

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

@@ -1,5 +1,5 @@
 import { formatNumberCompact } from '@automattic/number-formatters';
-import { XYChart, AreaSeries, AreaStack, Grid, Axis } from '@visx/xychart';
+import { XYChart, AnimatedAreaSeries, AnimatedAreaStack, Grid, Axis } from '@visx/xychart';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import {
@@ -135,6 +135,57 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 			totalPoints: dataSorted[ 0 ]?.data.length || 0,
 		} );
 
+		// 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.
+		const fixedYDomain = useMemo< [ number, number ] | undefined >( () => {
+			if (
+				! legendInteractive ||
+				! dataSorted.length ||
+				! dataSorted[ 0 ].data.length ||
+				( stacked && stackOffset !== 'none' )
+			) {
+				return undefined;
+			}
+
+			if ( stacked ) {
+				// d3-stack with `offset: 'none'` stacks positives upward from 0 and
+				// negatives downward from 0, so we need both extremes.
+				const numPoints = Math.max( ...dataSorted.map( s => s.data.length ) );
+				let posMax = 0;
+				let negMin = 0;
+				for ( let i = 0; i < numPoints; i++ ) {
+					let posSum = 0;
+					let negSum = 0;
+					for ( const series of dataSorted ) {
+						const v = Number( series.data[ i ]?.value );
+						if ( Number.isNaN( v ) ) continue;
+						if ( v >= 0 ) posSum += v;
+						else negSum += v;
+					}
+					if ( posSum > posMax ) posMax = posSum;
+					if ( negSum < negMin ) negMin = negSum;
+				}
+				return [ negMin, posMax ];
+			}
+
+			let max = -Infinity;
+			let min = Infinity;
+			for ( const series of dataSorted ) {
+				for ( const point of series.data ) {
+					const v = Number( point?.value );
+					if ( ! Number.isNaN( v ) ) {
+						if ( v > max ) max = v;
+						if ( v < min ) min = v;
+					}
+				}
+			}
+			if ( max === -Infinity ) return undefined;
+			return [ Math.min( 0, min ), max ];
+		}, [ dataSorted, stacked, stackOffset, legendInteractive ] );
+
 		const chartOptions = useMemo( () => {
 			const formatter = options?.axis?.x?.tickFormat || getFormatter( dataSorted );
 
@@ -164,10 +215,11 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 					nice: true,
 					// Stacked areas should always include zero so the baseline is meaningful.
 					zero: stacked,
+					...( fixedYDomain ? { domain: fixedYDomain } : {} ),
 					...options?.yScale,
 				},
 			};
-		}, [ options, dataSorted, width, stacked ] );
+		}, [ options, dataSorted, width, stacked, fixedYDomain ] );
 
 		const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme );
 
@@ -191,11 +243,48 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 		} );
 
 		const prefersReducedMotion = usePrefersReducedMotion();
+		const animationEnabled = !! animation && ! prefersReducedMotion;
 
 		const accessors = {
 			xAccessor: ( d: DataPointDate ) => d?.date,
 			yAccessor: ( d: DataPointDate ) => d?.value,
 		};
+		const zeroYAccessor = useCallback( () => 0, [] );
+
+		// Hidden series are still registered with visx (so paths can interpolate), but their
+		// data points should not appear in the tooltip.
+		const visibleLabels = useMemo(
+			() => new Set( seriesWithVisibility.filter( s => s.isVisible ).map( s => s.series.label ) ),
+			[ seriesWithVisibility ]
+		);
+		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(
+					Object.entries( datumByKey ).filter( ( [ key ] ) => visibleLabels.has( key ) )
+				);
+				if ( Object.keys( filtered ).length === 0 ) return null;
+				// `nearestDatum` may still point at a hidden series; re-point it at the first
+				// visible entry so consumers that read it (e.g. for the tooltip heading) don't
+				// surface hidden-series state.
+				const nearestDatum = params?.tooltipData?.nearestDatum;
+				const nextNearest =
+					nearestDatum && visibleLabels.has( nearestDatum.key )
+						? nearestDatum
+						: { ...Object.values( filtered )[ 0 ], distance: nearestDatum?.distance ?? 0 };
+				return renderTooltip( {
+					...params,
+					tooltipData: {
+						...params.tooltipData,
+						datumByKey: filtered,
+						nearestDatum: nextNearest,
+					} as typeof params.tooltipData,
+				} );
+			},
+			[ renderTooltip, legendInteractive, visibleLabels ]
+		);
 
 		// Defaults that depend on stacked vs overlapping mode.
 		const resolvedFillOpacity = fillOpacity ?? ( stacked ? 0.85 : 0.4 );
@@ -224,6 +313,33 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 		const visibleSeries = seriesWithVisibility.filter( ( { isVisible } ) => isVisible );
 		const curve = getCurveType( curveType, smoothing );
 
+		// Visx's `<AreaStack>` keys each `<Area>` by `stackIndex-dataKey`, so filtering out
+		// a hidden series would shift indexes and remount every path. Instead we keep every
+		// series mounted and zero out hidden ones via `yAccessor` — react-spring then
+		// interpolates the `d` attribute, giving a smooth "going down" effect for the
+		// hidden area and a smooth re-flow for the rest.
+		const renderSeries = ( {
+			series: seriesData,
+			index,
+			isVisible,
+		}: ( typeof seriesWithVisibility )[ number ] ) => {
+			const { color, lineStyles } = getElementStyles( { data: seriesData, index } );
+			return (
+				<AnimatedAreaSeries
+					key={ seriesData?.label || index }
+					dataKey={ seriesData?.label }
+					data={ seriesData.data as DataPointDate[] }
+					xAccessor={ accessors.xAccessor }
+					yAccessor={ isVisible || ! legendInteractive ? accessors.yAccessor : zeroYAccessor }
+					fill={ color }
+					fillOpacity={ resolvedFillOpacity }
+					{ ...( stacked ? {} : { renderLine: resolvedWithStroke, curve } ) }
+					lineProps={ { stroke: color, ...lineStyles } }
+					data-testid={ `area-chart-series-${ index }` }
+				/>
+			);
+		};
+
 		return (
 			<SingleChartContext.Provider
 				value={ {
@@ -241,7 +357,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 					className={ clsx(
 						'area-chart',
 						styles[ 'area-chart' ],
-						{ [ styles[ 'area-chart--animated' ] ]: animation && ! prefersReducedMotion },
+						{ [ styles[ 'area-chart--animated' ] ]: animationEnabled },
 						className
 					) }
 					style={ { width, height } }
@@ -295,62 +411,16 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 											) : null }
 
 											{ ! allSeriesHidden && stacked && (
-												<AreaStack
+												<AnimatedAreaStack
 													curve={ curve }
 													offset={ stackOffset }
 													renderLine={ resolvedWithStroke }
 												>
-													{ visibleSeries.map( ( { series: seriesData, index } ) => {
-														const { color, lineStyles } = getElementStyles( {
-															data: seriesData,
-															index,
-														} );
-
-														return (
-															<AreaSeries
-																key={ seriesData?.label || index }
-																dataKey={ seriesData?.label }
-																data={ seriesData.data as DataPointDate[] }
-																{ ...accessors }
-																fill={ color }
-																fillOpacity={ resolvedFillOpacity }
-																lineProps={ {
-																	stroke: color,
-																	...lineStyles,
-																} }
-																data-testid={ `area-chart-series-${ index }` }
-															/>
-														);
-													} ) }
-												</AreaStack>
+													{ seriesWithVisibility.map( renderSeries ) }
+												</AnimatedAreaStack>
 											) }
 
-											{ ! allSeriesHidden &&
-												! stacked &&
-												visibleSeries.map( ( { series: seriesData, index } ) => {
-													const { color, lineStyles } = getElementStyles( {
-														data: seriesData,
-														index,
-													} );
-
-													return (
-														<AreaSeries
-															key={ seriesData?.label || index }
-															dataKey={ seriesData?.label }
-															data={ seriesData.data as DataPointDate[] }
-															{ ...accessors }
-															fill={ color }
-															fillOpacity={ resolvedFillOpacity }
-															renderLine={ resolvedWithStroke }
-															curve={ curve }
-															lineProps={ {
-																stroke: color,
-																...lineStyles,
-															} }
-															data-testid={ `area-chart-series-${ index }` }
-														/>
-													);
-												} ) }
+											{ ! allSeriesHidden && ! stacked && seriesWithVisibility.map( renderSeries ) }
 
 											{ withTooltips && (
 												<>
@@ -359,7 +429,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 														snapTooltipToDatumX
 														// Stacked mode: yAccessor returns raw value, not stacked y — snapping mispositions.
 														snapTooltipToDatumY={ ! stacked }
-														renderTooltip={ renderTooltip }
+														renderTooltip={ filteredRenderTooltip }
 														showVerticalCrosshair={ withTooltipCrosshairs?.showVertical }
 														showHorizontalCrosshair={ withTooltipCrosshairs?.showHorizontal }
 														selectedIndex={ selectedIndex }

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

@@ -148,6 +148,196 @@ describe( 'AreaChart', () => {
 		} );
 	} );
 
+	describe( 'Interactive legend', () => {
+		test( 'keeps every series mounted after hiding one (stacked)', async () => {
+			const user = userEvent.setup();
+			renderWithProvider( {
+				showLegend: true,
+				chartId: 'test-interactive-stacked',
+				legend: { interactive: true },
+			} );
+
+			expect( screen.getByTestId( 'area-chart-series-0' ) ).toBeInTheDocument();
+			expect( screen.getByTestId( 'area-chart-series-1' ) ).toBeInTheDocument();
+
+			await user.click( screen.getByText( 'Series A' ) );
+
+			// Both series remain in the DOM (hidden one is zeroed via yAccessor,
+			// not unmounted) so that visx stack indices stay stable.
+			expect( screen.getByTestId( 'area-chart-series-0' ) ).toBeInTheDocument();
+			expect( screen.getByTestId( 'area-chart-series-1' ) ).toBeInTheDocument();
+		} );
+
+		test( 'keeps every series mounted after hiding one (unstacked)', async () => {
+			const user = userEvent.setup();
+			renderWithProvider( {
+				stacked: false,
+				showLegend: true,
+				chartId: 'test-interactive-unstacked',
+				legend: { interactive: true },
+			} );
+
+			await user.click( screen.getByText( 'Series A' ) );
+
+			expect( screen.getByTestId( 'area-chart-series-0' ) ).toBeInTheDocument();
+			expect( screen.getByTestId( 'area-chart-series-1' ) ).toBeInTheDocument();
+		} );
+
+		test( 'tooltip omits hidden series after toggle', async () => {
+			const user = userEvent.setup();
+			renderWithProvider( {
+				showLegend: true,
+				chartId: 'test-interactive-tooltip',
+				legend: { interactive: true },
+			} );
+
+			await user.click( screen.getByText( 'Series A' ) );
+
+			// Open a tooltip via keyboard navigation, then verify the hidden
+			// series' label is absent from the rendered tooltip rows.
+			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' );
+		} );
+
+		test( 'renderTooltip receives only visible series in datumByKey', async () => {
+			const user = userEvent.setup();
+			const renderTooltip = jest.fn( () => <div>tooltip</div> );
+			renderWithProvider( {
+				showLegend: true,
+				chartId: 'test-interactive-render-tooltip',
+				legend: { interactive: true },
+				renderTooltip,
+			} );
+
+			await user.click( screen.getByText( 'Series A' ) );
+			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			chart.focus();
+			await user.keyboard( '{ArrowRight}' );
+
+			// `renderTooltip` may be called for non-keyboard events too, but the
+			// keyboard-driven call must have filtered datumByKey down to visible series.
+			const calls = renderTooltip.mock.calls as unknown as Array<
+				[
+					{
+						tooltipData?: {
+							datumByKey?: Record< string, unknown >;
+							nearestDatum?: { key: string };
+						};
+					},
+				]
+			>;
+			const keyboardCall = calls.find( ( [ params ] ) => params?.tooltipData?.datumByKey );
+			expect( keyboardCall ).toBeDefined();
+			const keys = Object.keys( keyboardCall![ 0 ].tooltipData!.datumByKey! );
+			expect( keys ).toContain( 'Series B' );
+			expect( keys ).not.toContain( 'Series A' );
+			// And `nearestDatum` should never point at a hidden series.
+			expect( keyboardCall![ 0 ].tooltipData?.nearestDatum?.key ).not.toBe( 'Series A' );
+		} );
+
+		test( 'y-axis domain stays fixed across legend toggles', async () => {
+			const user = userEvent.setup();
+			const ref = createRef< SingleChartRef >();
+			render(
+				<GlobalChartsProvider>
+					<AreaChartUnresponsive
+						{ ...defaultProps }
+						showLegend
+						chartId="test-interactive-domain"
+						legend={ { interactive: true } }
+						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', () => {
+			const ref = createRef< SingleChartRef >();
+			render(
+				<GlobalChartsProvider>
+					<AreaChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						chartId="test-interactive-negative"
+						showLegend
+						legend={ { interactive: true } }
+						data={ [
+							{
+								label: 'Pos',
+								data: [
+									{ date: new Date( '2024-01-01' ), value: 10 },
+									{ date: new Date( '2024-01-02' ), value: 20 },
+								],
+							},
+							{
+								label: 'Neg',
+								data: [
+									{ date: new Date( '2024-01-01' ), value: -5 },
+									{ date: new Date( '2024-01-02' ), value: -15 },
+								],
+							},
+						] }
+						ref={ ref }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const [ min, max ] =
+				( ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined )?.domain() ??
+				[];
+			expect( min ).toBeLessThanOrEqual( -15 );
+			expect( max ).toBeGreaterThanOrEqual( 20 );
+		} );
+
+		test( 'does not pin domain for non-default stack offsets', () => {
+			const ref = createRef< SingleChartRef >();
+			render(
+				<GlobalChartsProvider>
+					<AreaChartUnresponsive
+						{ ...defaultProps }
+						chartId="test-interactive-expand"
+						showLegend
+						legend={ { interactive: true } }
+						stackOffset="expand"
+						ref={ ref }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			// `expand` normalises to [0,1]; if we accidentally pinned the raw-sum
+			// domain (e.g. [0, 35]), the top of the domain would be far above 1.
+			const [ min, max ] =
+				( ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined )?.domain() ??
+				[];
+			expect( min ).toBeGreaterThanOrEqual( 0 );
+			expect( max ).toBeLessThanOrEqual( 1.001 );
+		} );
+	} );
+
+	describe( 'Without GlobalChartsProvider', () => {
+		test( 'self-wraps in a provider when none is present', () => {
+			render( <AreaChartUnresponsive { ...defaultProps } /> );
+			expect( screen.getByRole( 'grid', { name: /area chart/i } ) ).toBeInTheDocument();
+		} );
+	} );
+
 	describe( 'Accessibility', () => {
 		test( 'chart container has expected ARIA attributes', () => {
 			renderWithProvider();
@@ -233,6 +423,19 @@ describe( 'AreaChart', () => {
 			expect( glyphs ).toHaveLength( 2 );
 		} );
 
+		test( 'renders glyphs in unstacked mode with interactive legend', async () => {
+			renderWithProvider( {
+				stacked: false,
+				showLegend: true,
+				chartId: 'test-unstacked-interactive',
+				legend: { interactive: true },
+			} );
+			await focusFirstDatum();
+
+			const glyphs = screen.getAllByTestId( /^area-chart-hover-glyph-/ );
+			expect( glyphs ).toHaveLength( 2 );
+		} );
+
 		test( 'renders glyphs only for series with a datum at the hovered x (mismatched x-domains)', async () => {
 			// Each series' data[0] is a different date. Keyboard nav fires
 			// showTooltip for every series at its own data[selectedIndex];

package/src/hooks/index.ts

@@ -9,4 +9,3 @@ export { useZeroValueDisplay } from './use-zero-value-display';
 export { useDataWithPercentages } from './use-data-with-percentages';
 export { useInteractiveLegendData } from './use-interactive-legend-data';
 export { usePrefersReducedMotion } from './use-prefers-reduced-motion';
-export { useTooltipPortalRelocator } from './use-tooltip-portal-relocator';

package/src/hooks/test/use-chart-margin.test.tsx

@@ -89,6 +89,27 @@ describe( 'useChartMargin', () => {
 		expect( result.current.right ).toBe( 48 ); // 40 + 8
 	} );
 
+	it( 'uses explicit y tickValues when provided', () => {
+		const options = {
+			...optionsBase,
+			axis: {
+				...optionsBase.axis,
+				y: {
+					...optionsBase.axis.y,
+					tickValues: [ 0, 1000 ],
+				},
+			},
+		};
+		const height = 300;
+		const theme = baseTheme;
+		renderHook( () => useChartMargin( height, options, data, theme ) );
+		expect( mockGetLongestTickWidth ).toHaveBeenCalledWith(
+			[ 0, 1000 ],
+			options.axis.y.tickFormat,
+			theme.axisStyles.y.left.axisLabel
+		);
+	} );
+
 	it( 'sets top and bottom margin for top x axis', () => {
 		const options = {
 			...optionsBase,

package/src/hooks/use-chart-margin.tsx

@@ -81,6 +81,10 @@ export const useChartMargin = (
 			);
 		}
 
+		if ( options.axis?.y?.tickValues?.length ) {
+			return options.axis.y.tickValues;
+		}
+
 		const minY = Math.min( ...allDataPoints.map( d => d.value ) );
 		const maxY = Math.max( ...allDataPoints.map( d => d.value ) );
 		const yScale = createScale( {

package/src/providers/chart-context/global-charts-provider.tsx

@@ -8,7 +8,6 @@ import {
 	useLayoutEffect,
 	useRef,
 } from 'react';
-import { useTooltipPortalRelocator } from '../../hooks/use-tooltip-portal-relocator';
 import {
 	getItemShapeStyles,
 	getSeriesLineStyles,
@@ -27,22 +26,9 @@ export const GlobalChartsContext = createContext< GlobalChartsContextValue | nul
 export interface GlobalChartsProviderProps {
 	children: ReactNode;
 	theme?: Partial< ChartTheme >;
-	/**
-	 * Optional ref to an element that chart tooltip portals should be relocated into.
-	 * When provided, visx tooltip portals (normally appended to document.body) will be
-	 * moved into this container so they participate in the same effective CSS stacking context.
-	 * The element referenced here, or one of its ancestors, should establish the desired
-	 * stacking context (for example by using `position` and `z-index`) so that tooltips
-	 * appear above the relevant chart content.
-	 */
-	portalContainer?: React.RefObject< HTMLElement | null >;
 }
 
-export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
-	children,
-	theme,
-	portalContainer,
-} ) => {
+export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { children, theme } ) => {
 	const [ charts, setCharts ] = useState< Map< string, ChartRegistration > >( () => new Map() );
 	// Track hidden series per chart: chartId -> Set<seriesLabel>
 	const [ hiddenSeries, setHiddenSeries ] = useState< Map< string, Set< string > > >(
@@ -52,9 +38,6 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 	// Ref to the wrapper element for resolving scoped CSS variables
 	const wrapperRef = useRef< HTMLDivElement >( null );
 
-	// Relocate tooltip portals into the wrapper (or a consumer-provided container) for z-index control.
-	useTooltipPortalRelocator( portalContainer ?? wrapperRef );
-
 	const providerTheme: CompleteChartTheme = useMemo( () => {
 		return theme ? mergeThemes( defaultTheme, theme ) : defaultTheme;
 	}, [ theme ] );

package/src/style.css

@@ -0,0 +1,10 @@
+/*
+ * Placeholder for the `jetpack:src` arm of the `./style.css` package export.
+ *
+ * In-monorepo consumers resolving via source already pull each chart's
+ * `.module.scss` styles through the JS module graph, so no aggregated
+ * stylesheet is needed at this path.
+ *
+ * Published consumers resolve via the `default` condition, which points at
+ * the aggregated `./dist/index.css` produced by tsup.
+ */

package/src/types.ts

@@ -322,6 +322,11 @@ export type CompleteChartTheme = Required< ChartTheme > & {
 export type AxisOptions = {
 	orientation?: OrientationType;
 	numTicks?: number;
+	/**
+	 * Explicit tick values for the axis. When set, takes precedence over `numTicks`
+	 * so callers can force a specific axis (e.g. integer-only steps on a sparse chart).
+	 */
+	tickValues?: ScaleInput< AxisScale >[];
 	axisClassName?: string;
 	axisLineClassName?: string;
 	labelClassName?: string;
@@ -352,6 +357,11 @@ export type AxisOptions = {
 export type ScaleOptions = {
 	type?: ScaleType;
 	zero?: boolean;
+	/**
+	 * Extends the scale's domain to nice round values. Pass `false` together with
+	 * an explicit `domain` to keep the tick values you set exactly.
+	 */
+	nice?: boolean;
 	domain?: [ number, number ];
 	range?: [ number, number ];
 	/**

package/tsup.config.ts

@@ -3,10 +3,11 @@ import { sassPlugin, postcssModules } from 'esbuild-sass-plugin';
 import { defineConfig } from 'tsup';
 import pkg from './package.json';
 
-// Extract entries from package exports
+// Extract JS/TS entries from package exports. Non-JS source paths (e.g. the
+// `./style.css` placeholder) are skipped so tsup doesn't try to bundle them.
 const entry = Object.values( pkg.exports )
 	.map( $export => ( typeof $export === 'object' ? $export[ 'jetpack:src' ] : '' ) )
-	.filter( ( path ): path is string => Boolean( path ) );
+	.filter( ( path ): path is string => Boolean( path ) && /\.[cm]?[jt]sx?$/.test( path ) );
 
 export default defineConfig( {
 	entry,