@automattic/charts 1.2.0 → 1.3.0

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

@@ -0,0 +1,264 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
+import { GlobalChartsProvider } from '../../../providers';
+import AreaChart, { AreaChartUnresponsive } from '../area-chart';
+import type { SingleChartRef } from '../../private/single-chart-context';
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+describe( 'AreaChart', () => {
+	const defaultProps = {
+		width: 500,
+		height: 300,
+		data: [
+			{
+				label: 'Series A',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' },
+					{ date: new Date( '2024-01-02' ), value: 20, label: 'Jan 2' },
+				],
+			},
+			{
+				label: 'Series B',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 5, label: 'Jan 1' },
+					{ date: new Date( '2024-01-02' ), value: 15, label: 'Jan 2' },
+				],
+			},
+		],
+	};
+
+	const renderWithProvider = ( props = {}, children: React.ReactNode = undefined ) => {
+		return render(
+			<GlobalChartsProvider>
+				<AreaChart { ...defaultProps } { ...props }>
+					{ children }
+				</AreaChart>
+			</GlobalChartsProvider>
+		);
+	};
+
+	const renderUnresponsive = ( props = {}, ref?: React.Ref< SingleChartRef > ) => {
+		return render(
+			<GlobalChartsProvider>
+				<AreaChartUnresponsive { ...defaultProps } { ...props } ref={ ref } />
+			</GlobalChartsProvider>
+		);
+	};
+
+	describe( 'Data Validation', () => {
+		test( 'shows error when data is empty', () => {
+			renderWithProvider( { data: [] } );
+			expect( screen.getByText( /no data available/i ) ).toBeInTheDocument();
+		} );
+
+		test( 'shows error for null values', () => {
+			renderWithProvider( {
+				data: [
+					{
+						label: 'Series A',
+						data: [
+							{ date: new Date( '2024-01-01' ), value: null as number | null },
+							{ date: new Date( '2024-01-02' ), value: 5 },
+						],
+					},
+				],
+			} );
+			expect( screen.getByText( /invalid data/i ) ).toBeInTheDocument();
+		} );
+
+		test( 'shows error for invalid dates', () => {
+			renderWithProvider( {
+				data: [
+					{
+						label: 'Series A',
+						data: [
+							{ date: new Date( 'invalid' ), value: 10 },
+							{ date: new Date( '2024-01-02' ), value: 20 },
+						],
+					},
+				],
+			} );
+			expect( screen.getByText( /invalid data/i ) ).toBeInTheDocument();
+		} );
+
+		test( 'shows error when a series has empty data', () => {
+			// A non-empty series guards against the "No data available" path
+			// for the top-level array; the empty-series check is a separate guard.
+			renderWithProvider( {
+				data: [
+					{
+						label: 'Series A',
+						data: [ { date: new Date( '2024-01-01' ), value: 10 } ],
+					},
+					{
+						label: 'Series B (empty)',
+						data: [],
+					},
+				],
+			} );
+			expect( screen.getByText( /no data available/i ) ).toBeInTheDocument();
+		} );
+
+		test( 'renders with valid data', () => {
+			renderWithProvider();
+			expect( screen.getByRole( 'grid', { name: /area chart/i } ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Stacking', () => {
+		test( 'is stacked by default', () => {
+			renderWithProvider();
+			// Both series should be rendered, regardless of mode.
+			expect( screen.getByTestId( 'area-chart-series-0' ) ).toBeInTheDocument();
+			expect( screen.getByTestId( 'area-chart-series-1' ) ).toBeInTheDocument();
+		} );
+
+		test( 'renders unstacked when stacked={ false }', () => {
+			renderWithProvider( { stacked: false } );
+			expect( screen.getByTestId( 'area-chart-series-0' ) ).toBeInTheDocument();
+			expect( screen.getByTestId( 'area-chart-series-1' ) ).toBeInTheDocument();
+		} );
+
+		test( 'accepts custom stackOffset', () => {
+			renderWithProvider( { stackOffset: 'expand' } );
+			expect( screen.getByRole( 'grid', { name: /area chart/i } ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Legend', () => {
+		test( 'shows legend when showLegend is true', () => {
+			renderWithProvider( { showLegend: true } );
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Series B' ) ).toBeInTheDocument();
+		} );
+
+		test( 'hides legend by default', () => {
+			renderWithProvider();
+			expect( screen.queryByText( 'Series A' ) ).not.toBeInTheDocument();
+		} );
+
+		test( 'renders composition legend as child component', () => {
+			renderWithProvider( {}, <AreaChart.Legend /> );
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+		} );
+	} );
+
+	describe( 'Accessibility', () => {
+		test( 'chart container has expected ARIA attributes', () => {
+			renderWithProvider();
+			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			expect( chart ).toHaveAttribute( 'tabIndex', '0' );
+			expect( chart ).toHaveAttribute( 'aria-label', 'Area chart' );
+		} );
+	} );
+
+	describe( 'Chart Ref Interface', () => {
+		test( 'exposes getScales via ref', () => {
+			const ref = createRef< SingleChartRef >();
+			renderUnresponsive( {}, ref );
+
+			expect( ref.current?.getScales() ).toBeDefined();
+			expect( ref.current?.getScales()?.xScale ).toBeDefined();
+			expect( ref.current?.getScales()?.yScale ).toBeDefined();
+		} );
+
+		test( 'exposes getChartDimensions via ref', () => {
+			const ref = createRef< SingleChartRef >();
+			renderUnresponsive( { width: 800, height: 400 }, ref );
+
+			const dimensions = ref.current?.getChartDimensions();
+			expect( dimensions?.width ).toBe( 800 );
+			expect( dimensions?.height ).toBe( 400 );
+		} );
+	} );
+
+	describe( 'Tooltips', () => {
+		test( 'tooltips can be disabled', () => {
+			renderWithProvider( { withTooltips: false } );
+			// Tooltip portal element should not be present.
+			expect( screen.queryByTestId( 'chart-tooltip-0' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Hover glyphs', () => {
+		// Trigger the AccessibleTooltip's keyboard nav so a tooltip is opened
+		// against a known datum index, which is the only reliable way to
+		// surface the visx TooltipContext state in a jsdom environment.
+		const focusFirstDatum = async () => {
+			const user = userEvent.setup();
+			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			chart.focus();
+			await user.keyboard( '{ArrowRight}' );
+		};
+
+		test( 'renders one glyph per visible series in stacked + offset="none"', async () => {
+			renderWithProvider();
+			await focusFirstDatum();
+
+			const glyphs = screen.getAllByTestId( /^area-chart-hover-glyph-/ );
+			expect( glyphs ).toHaveLength( 2 );
+		} );
+
+		test( 'renders no glyphs when stackOffset is "expand"', async () => {
+			renderWithProvider( { stackOffset: 'expand' } );
+			await focusFirstDatum();
+
+			expect( screen.queryAllByTestId( /^area-chart-hover-glyph-/ ) ).toHaveLength( 0 );
+		} );
+
+		test( 'renders no glyphs when stackOffset is "wiggle"', async () => {
+			renderWithProvider( { stackOffset: 'wiggle' } );
+			await focusFirstDatum();
+
+			expect( screen.queryAllByTestId( /^area-chart-hover-glyph-/ ) ).toHaveLength( 0 );
+		} );
+
+		test( 'renders no glyphs when stackOffset is "silhouette"', async () => {
+			renderWithProvider( { stackOffset: 'silhouette' } );
+			await focusFirstDatum();
+
+			expect( screen.queryAllByTestId( /^area-chart-hover-glyph-/ ) ).toHaveLength( 0 );
+		} );
+
+		test( 'renders glyphs in unstacked mode', async () => {
+			renderWithProvider( { stacked: false } );
+			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];
+			// the LAST one wins as the nearestDatum, so the resolved hover
+			// date is Series B's. HoverGlyphs should:
+			//   - Skip Series A (no datum at Series B's date) — cumulative += 0
+			//   - Render a glyph for Series B
+			renderWithProvider( {
+				data: [
+					{
+						label: 'Series A',
+						data: [ { date: new Date( '2024-01-01' ), value: 10 } ],
+					},
+					{
+						label: 'Series B',
+						data: [ { date: new Date( '2024-01-15' ), value: 5 } ],
+					},
+				],
+			} );
+			await focusFirstDatum();
+
+			const glyphs = screen.getAllByTestId( /^area-chart-hover-glyph-/ );
+			expect( glyphs ).toHaveLength( 1 );
+			// Only Series B (index 1) has a datum at the hovered date.
+			expect( screen.getByTestId( 'area-chart-hover-glyph-1' ) ).toBeInTheDocument();
+			expect( screen.queryByTestId( 'area-chart-hover-glyph-0' ) ).not.toBeInTheDocument();
+		} );
+	} );
+} );

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

@@ -0,0 +1,51 @@
+import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
+import type { CurveType } from '../line-chart/types';
+import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
+import type { ReactNode } from 'react';
+
+export interface AreaChartProps extends BaseChartProps< SeriesData[] > {
+	/**
+	 * Whether series should be stacked on top of each other.
+	 * When false, series are rendered as overlapping filled areas.
+	 * @default true
+	 */
+	stacked?: boolean;
+	/**
+	 * Stack offset strategy when stacked is true. Mirrors d3-shape stack offsets.
+	 * - 'none' (default): values stack at their natural magnitude
+	 * - 'expand': values are normalized to the [0,1] range (percentage stacks)
+	 * - 'wiggle': used for streamgraphs
+	 * - 'silhouette': stack centered around zero
+	 */
+	stackOffset?: 'none' | 'expand' | 'wiggle' | 'silhouette';
+	/**
+	 * Smoothing using a Catmull-Rom curve. Ignored if `curveType` is set.
+	 */
+	smoothing?: boolean;
+	/**
+	 * Curve interpolation type. Takes precedence over `smoothing`.
+	 */
+	curveType?: CurveType;
+	/**
+	 * Custom tooltip renderer.
+	 */
+	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
+	/**
+	 * Whether to show crosshair lines in the tooltip.
+	 */
+	withTooltipCrosshairs?: {
+		showVertical?: boolean;
+		showHorizontal?: boolean;
+	};
+	/**
+	 * Fill opacity for the stacked areas. 0–1.
+	 * @default 0.85 when stacked, 0.4 when overlapping
+	 */
+	fillOpacity?: number;
+	/**
+	 * Whether to render a stroke (line) on top of each area.
+	 * @default false when stacked, true when overlapping
+	 */
+	withStroke?: boolean;
+	children?: ReactNode;
+}

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

@@ -1,4 +1,4 @@
-export { default as LineChart, LineChartUnresponsive } from './line-chart';
+export { default as LineChart, LineChartUnresponsive, renderDefaultTooltip } from './line-chart';
 export type { AnnotationStyles } from '../../types';
 export type {
 	LineChartAnnotationProps,

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

@@ -1,12 +1,9 @@
 import { formatNumberCompact, formatNumber } from '@automattic/number-formatters';
-import { curveCatmullRom, curveLinear, curveMonotoneX } from '@visx/curve';
 import { LinearGradient } from '@visx/gradient';
-import { scaleTime } from '@visx/scale';
 import { XYChart, AreaSeries, Grid, Axis, DataContext } from '@visx/xychart';
 import { __ } from '@wordpress/i18n';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
-import { differenceInHours, differenceInYears } from 'date-fns';
 import {
 	useMemo,
 	useContext,
@@ -38,10 +35,11 @@ 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 { getCurveType, getFormatter, guessOptimalNumTicks } from '../private/time-axis';
 import { withResponsive } from '../private/with-responsive';
 import styles from './line-chart.module.scss';
 import { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';
-import type { CurveType, RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';
+import type { RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';
 import type { DataPoint, DataPointDate, SeriesData, Optional } from '../../types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { TickFormatter } from '@visx/axis';
@@ -49,8 +47,6 @@ import type { GlyphProps } from '@visx/xychart';
 import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { FC, Ref } from 'react';
 
-const X_TICK_WIDTH = 60;
-
 const defaultRenderGlyph = < Datum extends object >( props: RenderLineGlyphProps< Datum > ) => {
 	return <DefaultGlyph { ...props } key={ props.key } />;
 };
@@ -61,32 +57,14 @@ const toNumber = ( val?: number | string | null ): number | undefined => {
 };
 
 /**
- * Determines the curve type for the line chart based on the provided type and smoothing parameters
+ * Default visx-tooltip render that prints the hovered date as a heading and
+ * one row per visible series (label + formatted value), sorted descending by
+ * value. Reused by AreaChart, which has the same multi-series shape.
  *
- * @param {CurveType} type      - The explicit curve type to use
- * @param {boolean}   smoothing - Legacy smoothing parameter
- * @return The curve function to use for the line
+ * @param params - visx `RenderTooltipParams< DataPointDate >`.
+ * @return Tooltip JSX, or `null` when no datum is hovered.
  */
-const getCurveType = ( type?: CurveType, smoothing?: boolean ) => {
-	// If no type specified, use legacy smoothing behavior
-	if ( ! type ) {
-		return smoothing ? curveCatmullRom : curveLinear;
-	}
-
-	// Handle explicit curve types
-	switch ( type ) {
-		case 'smooth':
-			return curveCatmullRom;
-		case 'monotone':
-			return curveMonotoneX;
-		case 'linear':
-			return curveLinear;
-		default:
-			return curveLinear;
-	}
-};
-
-const renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate > ) => {
+export const renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate > ) => {
 	const { tooltipData } = params;
 	const nearestDatum = tooltipData?.nearestDatum?.datum;
 	if ( ! nearestDatum ) return null;
@@ -121,94 +99,6 @@ const renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate > ) =>
 	);
 };
 
-const formatYearTick = ( timestamp: number ) => {
-	const date = new Date( timestamp );
-	return date.toLocaleDateString( undefined, {
-		year: 'numeric',
-	} );
-};
-
-const formatDateTick = ( timestamp: number ) => {
-	const date = new Date( timestamp );
-	return date.toLocaleDateString( undefined, {
-		month: 'short',
-		day: 'numeric',
-	} );
-};
-
-const formatHourTick = ( timestamp: number ) => {
-	const date = new Date( timestamp );
-	return date.toLocaleTimeString( undefined, {
-		hour: 'numeric',
-		hour12: true,
-	} );
-};
-
-const getFormatter = ( sortedData: ReturnType< typeof useChartDataTransform > ) => {
-	const minX = Math.min( ...sortedData.map( datom => datom.data.at( 0 )?.date ) );
-	const maxX = Math.max( ...sortedData.map( datom => datom.data.at( -1 )?.date ) );
-
-	const diffInHours = Math.abs( differenceInHours( maxX, minX ) );
-	if ( diffInHours <= 24 ) {
-		return formatHourTick;
-	}
-
-	const diffInYears = Math.abs( differenceInYears( maxX, minX ) );
-	if ( diffInYears <= 1 ) {
-		return formatDateTick;
-	}
-
-	return formatYearTick;
-};
-
-const guessOptimalNumTicks = (
-	data: ReturnType< typeof useChartDataTransform >,
-	chartWidth: number,
-	tickFormatter: ( timestamp: number, index?: number, values?: unknown ) => string
-) => {
-	const minX = Math.min( ...data.map( datom => datom.data.at( 0 )?.date ) );
-	const maxX = Math.max( ...data.map( datom => datom.data.at( -1 )?.date ) );
-	const xScale = scaleTime( { domain: [ minX, maxX ] } );
-
-	// Calculate upper bound of tick numbers based on data points and chart width
-	const upperBound = Math.min(
-		data[ 0 ]?.data.length || 3, // A sane fallback to avoid NaN when no data is present
-		Math.ceil( chartWidth / X_TICK_WIDTH )
-	);
-	let secondBestGuess = 1; // a tick number that's no greater than upperBound
-
-	for ( let numTicks = upperBound; numTicks > 1; --numTicks ) {
-		const ticks = xScale.ticks( numTicks ).map( d => tickFormatter( d.getTime() ) );
-
-		// The .ticks() function doesn't properly respect the requested number of ticks, so we need to check the length
-		if ( ticks.length > upperBound ) {
-			continue;
-		}
-
-		secondBestGuess = Math.max( secondBestGuess, ticks.length );
-
-		const uniqueTicks = Array.from( new Set( ticks ) );
-		if ( uniqueTicks.length === 1 ) {
-			// All ticks are the same, so skip further processing
-			return 1;
-		}
-
-		// Example: OCT 1 JAN 1 APR 1 JUL 1 OCT 1
-		// Here, the two OCTs are not duplicates as they represent October of two different years.
-		const hasConsecutiveDuplicate = ticks.some(
-			( tick, idx ) => idx > 0 && tick === ticks[ idx - 1 ]
-		);
-
-		if ( hasConsecutiveDuplicate ) {
-			continue;
-		}
-
-		return ticks.length;
-	}
-
-	return secondBestGuess;
-};
-
 const validateData = ( data: SeriesData[] ) => {
 	if ( ! data?.length ) return 'No data available';
 

package/src/charts/private/time-axis.ts

@@ -0,0 +1,106 @@
+import { curveCatmullRom, curveLinear, curveMonotoneX } from '@visx/curve';
+import { scaleTime } from '@visx/scale';
+import { differenceInHours, differenceInYears } from 'date-fns';
+import type { useChartDataTransform } from '../../hooks';
+import type { CurveType } from '../line-chart/types';
+
+// Approximate min pixel width for an x-axis tick label.
+const X_TICK_WIDTH = 60;
+
+// Resolve the visx curve generator for a given `curveType` / `smoothing`
+// combination. Shared by LineChart and AreaChart so the two render
+// identically when given the same props.
+//
+// Explicit return type avoids a TS2742 portable-name error in the .d.ts
+// build: the inferred type traces back to `@types/d3-shape` (a transitive
+// dep), but `typeof curveLinear` resolves through `@visx/curve` which we
+// own directly.
+export const getCurveType = ( type?: CurveType, smoothing?: boolean ): typeof curveLinear => {
+	if ( ! type ) {
+		return smoothing ? curveCatmullRom : curveLinear;
+	}
+
+	switch ( type ) {
+		case 'smooth':
+			return curveCatmullRom;
+		case 'monotone':
+			return curveMonotoneX;
+		case 'linear':
+			return curveLinear;
+		default:
+			return curveLinear;
+	}
+};
+
+const formatYearTick = ( timestamp: number ) => {
+	const date = new Date( timestamp );
+	return date.toLocaleDateString( undefined, { year: 'numeric' } );
+};
+
+const formatDateTick = ( timestamp: number ) => {
+	const date = new Date( timestamp );
+	return date.toLocaleDateString( undefined, { month: 'short', day: 'numeric' } );
+};
+
+const formatHourTick = ( timestamp: number ) => {
+	const date = new Date( timestamp );
+	return date.toLocaleTimeString( undefined, { hour: 'numeric', hour12: true } );
+};
+
+// Pick the most informative tick formatter for the data's time span: hours
+// within a day, calendar dates within a year, otherwise just years.
+export const getFormatter = ( sortedData: ReturnType< typeof useChartDataTransform > ) => {
+	const minX = Math.min( ...sortedData.map( datom => datom.data.at( 0 )?.date ) );
+	const maxX = Math.max( ...sortedData.map( datom => datom.data.at( -1 )?.date ) );
+
+	const diffInHours = Math.abs( differenceInHours( maxX, minX ) );
+	if ( diffInHours <= 24 ) {
+		return formatHourTick;
+	}
+
+	const diffInYears = Math.abs( differenceInYears( maxX, minX ) );
+	if ( diffInYears <= 1 ) {
+		return formatDateTick;
+	}
+
+	return formatYearTick;
+};
+
+// Estimate the largest number of x-axis ticks that fit without producing
+// consecutive duplicate labels under the given formatter. Used so the axis
+// adapts to the data's resolution rather than picking a fixed count.
+export const guessOptimalNumTicks = (
+	data: ReturnType< typeof useChartDataTransform >,
+	chartWidth: number,
+	tickFormatter: ( timestamp: number, index?: number, values?: unknown ) => string
+) => {
+	const minX = Math.min( ...data.map( datom => datom.data.at( 0 )?.date ) );
+	const maxX = Math.max( ...data.map( datom => datom.data.at( -1 )?.date ) );
+	const xScale = scaleTime( { domain: [ minX, maxX ] } );
+
+	const upperBound = Math.min(
+		data[ 0 ]?.data.length || 3,
+		Math.ceil( chartWidth / X_TICK_WIDTH )
+	);
+	let secondBestGuess = 1;
+
+	for ( let numTicks = upperBound; numTicks > 1; --numTicks ) {
+		const ticks = xScale.ticks( numTicks ).map( d => tickFormatter( d.getTime() ) );
+
+		if ( ticks.length > upperBound ) continue;
+
+		secondBestGuess = Math.max( secondBestGuess, ticks.length );
+
+		const uniqueTicks = Array.from( new Set( ticks ) );
+		if ( uniqueTicks.length === 1 ) return 1;
+
+		const hasConsecutiveDuplicate = ticks.some(
+			( tick, idx ) => idx > 0 && tick === ticks[ idx - 1 ]
+		);
+		if ( hasConsecutiveDuplicate ) continue;
+
+		return ticks.length;
+	}
+
+	return secondBestGuess;
+};

package/src/components/legend/legend.tsx

@@ -9,6 +9,7 @@ import type { LegendShape } from '@visx/legend/lib/types';
 const defaultShapeByChartType: Partial<
 	Record< ChartType, Extract< LegendShape< unknown, unknown >, string > >
 > = {
+	area: 'rect',
 	line: 'line',
 	bar: 'rect',
 	pie: 'circle',

package/src/index.ts

@@ -1,4 +1,5 @@
 // Charts
+export { AreaChart, AreaChartUnresponsive } from './charts/area-chart';
 export { BarChart, BarChartUnresponsive } from './charts/bar-chart';
 export { BarListChart, BarListChartUnresponsive } from './charts/bar-list-chart';
 export { ConversionFunnelChart } from './charts/conversion-funnel-chart';
@@ -79,6 +80,7 @@ export type { BaseTooltipProps, TooltipData, TooltipProps } from './components/t
 export type { LegendProps, BaseLegendProps, ChartLegendOptions } from './components/legend';
 
 // Previously available via '@automattic/charts/bar-chart', '@automattic/charts/line-chart', etc.
+export type { AreaChartProps } from './charts/area-chart';
 export type { BarChartProps } from './charts/bar-chart';
 export type {
 	BarListChartProps,

package/src/types.ts

@@ -16,6 +16,7 @@ type ValueOf< T > = T[ keyof T ];
 export type Optional< T, K extends keyof T > = Pick< Partial< T >, K > & Omit< T, K >;
 
 export type ChartType =
+	| 'area'
 	| 'bar'
 	| 'conversion-funnel'
 	| 'leaderboard'