@automattic/charts 1.8.1 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.8.1",
+	"version": "1.10.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -83,9 +83,9 @@
 		"@visx/vendor": "^4.0.0",
 		"@visx/xychart": "^4.0.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^13.0.0",
-		"@wordpress/theme": "0.15.1",
-		"@wordpress/ui": "0.13.0",
+		"@wordpress/icons": "^15.0.0",
+		"@wordpress/theme": "0.17.0",
+		"@wordpress/ui": "0.17.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -97,8 +97,8 @@
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "^7.29.7",
-		"@storybook/addon-docs": "10.3.6",
-		"@storybook/react": "10.3.6",
+		"@storybook/addon-docs": "10.4.6",
+		"@storybook/react": "10.4.6",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -109,9 +109,9 @@
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"@visx/glyph": "4.0.0",
-		"@wordpress/components": "35.0.1",
-		"@wordpress/element": "8.0.1",
-		"@wordpress/private-apis": "1.48.1",
+		"@wordpress/components": "36.1.0",
+		"@wordpress/element": "8.2.0",
+		"@wordpress/private-apis": "1.50.0",
 		"babel-jest": "30.4.1",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.4.2",
@@ -120,7 +120,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
-		"storybook": "10.3.6",
+		"storybook": "10.4.6",
 		"tsdown": "0.22.2",
 		"typescript": "5.9.3"
 	},

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

@@ -6,7 +6,9 @@
 		path {
 			transform-origin: 0 95%;
 			transform: scaleY(0);
-			animation: rise 1s ease-out forwards;
+			animation:
+				rise var(--wpds-motion-duration-xl, 400ms)
+				var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 		}
 	}
 

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

@@ -27,7 +27,7 @@ import {
 	useGlobalChartsContext,
 	useGlobalChartsTheme,
 } from '../../providers';
-import { attachSubComponents } from '../../utils';
+import { attachSubComponents, resolveCssVariable } from '../../utils';
 import { renderDefaultTooltip } from '../line-chart';
 import { useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
@@ -461,7 +461,10 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 														stacked={ stacked }
 														stackOffset={ stackOffset }
 														getElementStyles={ getElementStyles }
-														strokeColor={ providerTheme.backgroundColor }
+														strokeColor={
+															resolveCssVariable( providerTheme.backgroundColor ) ??
+															providerTheme.backgroundColor
+														}
 													/>
 												</>
 											) }

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

@@ -8,7 +8,9 @@
 		transform-origin: bottom;
 		transform-box: fill-box;
 		transform: scaleY(0);
-		animation: rise 1s ease-out forwards;
+		animation:
+			rise var(--wpds-motion-duration-xl, 400ms)
+			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 	}
 
 	@keyframes rise {
@@ -22,7 +24,9 @@
 		transform-origin: left;
 		transform-box: fill-box;
 		transform: scaleX(0);
-		animation: stretch 1s ease-out forwards;
+		animation:
+			stretch var(--wpds-motion-duration-xl, 400ms)
+			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 	}
 
 	@keyframes stretch {

package/src/charts/bar-chart/private/comparison-bars.tsx

@@ -10,6 +10,12 @@ import type { ElementStyles, GetElementStylesParams } from '../../../providers';
 import type { DataPointDate, SeriesData } from '../../../types';
 import type { FC, ReactNode } from 'react';
 
+/*
+ * `process.env.NODE_ENV` is replaced by the bundler at build time. Declare a
+ * minimal `process` locally so this file type-checks as source under `jetpack:src`.
+ */
+declare const process: { env: Record< string, string | undefined > };
+
 export type ComparisonSeriesEntry = {
 	series: SeriesData;
 	index: number;

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -12,7 +12,7 @@
 
 .main-rate {
 	overflow: hidden;
-	color: #1e1e1e;
+	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
 	text-overflow: ellipsis;
 	font-size: var(--wpds-typography-font-size-xl, 18px);
 	font-style: normal;
@@ -33,7 +33,7 @@
 
 .funnel-container {
 	flex: 1;
-	min-height: 200px;
+	min-height: 0;
 	width: 100%;
 }
 
@@ -43,7 +43,9 @@
 	height: 100%;
 
 	&--animated {
-		transition: opacity 0.3s ease;
+		transition:
+			opacity var(--wpds-motion-duration-lg, 300ms)
+			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
 	}
 
 	&--blurred {
@@ -52,7 +54,7 @@
 }
 
 .step-label {
-	color: #757575;
+	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-weight: var(--wpds-typography-font-weight-regular, 400);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -62,7 +64,7 @@
 }
 
 .step-rate {
-	color: #1e1e1e;
+	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-weight: var(--wpds-typography-font-weight-medium, 499);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -84,7 +86,9 @@
 		transform-origin: bottom;
 		transform-box: fill-box;
 		transform: scaleY(0);
-		animation: stretch 1s ease-out forwards;
+		animation:
+			stretch var(--wpds-motion-duration-xl, 400ms)
+			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 	}
 
 	@keyframes stretch {
@@ -96,18 +100,17 @@
 }
 
 .tooltip-wrapper {
-	border-bottom: var(--wpds-border-width-xs, 1px) solid var(--Gray-Gray-5, #dcdcde);
-	background: var(--black-white-white, #fff);
+	background: var(--wpds-color-background-surface-neutral-strong, #fff);
 
 	// Override .visx-tooltip inline styles.
 	border-radius: var(--wpds-border-radius-md, 4px) !important;
 	padding: var(--wpds-dimension-padding-md, 12px) !important;
-	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 3px 9px 0 rgba(0, 0, 0, 0.12) !important;
+	box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
 
 }
 
 .tooltip-title {
-	color: #1e1e1e;
+	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-regular, 400);
@@ -115,7 +118,7 @@
 }
 
 .tooltip-content {
-	color: #1e1e1e;
+	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-medium, 499);
@@ -124,6 +127,6 @@
 
 .empty-state {
 	text-align: center;
-	color: #6b7280;
+	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
 	font-size: var(--wpds-typography-font-size-lg, 16px);
 }

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

@@ -3,8 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { FC, useContext, useMemo } from 'react';
-import { Chart } from 'react-google-charts';
+import { FC, useContext, useEffect, useMemo, useRef } from 'react';
+import { Chart, type GoogleChartPackages, type ReactGoogleChartEvent } from 'react-google-charts';
 /**
  * Internal dependencies
  */
@@ -15,12 +15,99 @@ import { sanitizeHtml } from '../../utils/sanitize-html';
 import { Center } from '../private/center';
 import { withResponsive } from '../private/with-responsive';
 import styles from './geo-chart.module.scss';
-import { GeoChartProps } from './types';
+import type { GeoChartError, GeoChartProps } from './types';
 
 const DEFAULT_FEATURE_FILL_COLOR = '#ffffff';
 const DEFAULT_BACKGROUND_COLOR = '#ffffff';
+// `chartPackages` replaces (not extends) react-google-charts' default `[ 'corechart', 'controls' ]`,
+// so we restate the defaults and add `geochart`. Without it the loader backfills the geochart package
+// late, which can clash with another Google Charts version already loaded on the page.
+const GEO_CHART_PACKAGES: GoogleChartPackages[] = [ 'corechart', 'controls', 'geochart' ];
 
 type GoogleChartOptions = Record< string, unknown >;
+type GoogleChartErrorPayload = {
+	id?: unknown;
+	message?: unknown;
+	detailedMessage?: unknown;
+	options?: unknown;
+};
+
+// Google Charts renders draw errors as DOM elements injected into the chart
+// container: a wrapper `<div id="google-visualization-errors-all-N">` holding
+// one `<span id="google-visualization-errors-N">` per error. The span id is the
+// error id accepted by `google.visualization.errors.removeError()`.
+const GOOGLE_CHARTS_ERROR_ID_PREFIX = 'google-visualization-errors-';
+const GOOGLE_CHARTS_ERROR_WRAPPER_INFIX = '-all-';
+
+/**
+ * Collects Google Charts error elements rendered inside a chart container.
+ *
+ * @param container - The chart container element to scan.
+ * @return Errors found in the container, one per error span.
+ */
+function collectRenderedGeoChartErrors(
+	container: HTMLElement
+): Required< Pick< GeoChartError, 'id' | 'message' > >[] {
+	const elements = container.querySelectorAll< HTMLElement >(
+		`[id^="${ GOOGLE_CHARTS_ERROR_ID_PREFIX }"]`
+	);
+
+	return Array.from( elements )
+		.filter( element => ! element.id.includes( GOOGLE_CHARTS_ERROR_WRAPPER_INFIX ) )
+		.map( element => ( {
+			id: element.id,
+			message: element.textContent?.trim() ?? '',
+		} ) )
+		.filter( error => error.message.length > 0 );
+}
+
+/**
+ * Whether a node added to the chart container is — or contains — a Google
+ * Charts error element. Also matches text appended into an existing error
+ * span, in case Google fills the message after inserting the element.
+ *
+ * @param node - The added DOM node to inspect.
+ * @return Whether the node involves a Google Charts error element.
+ */
+function involvesGeoChartErrorElement( node: Node ): boolean {
+	if ( node.nodeType === Node.TEXT_NODE ) {
+		return !! node.parentElement?.id.startsWith( GOOGLE_CHARTS_ERROR_ID_PREFIX );
+	}
+
+	if ( ! ( node instanceof HTMLElement ) ) {
+		return false;
+	}
+
+	return (
+		node.id.startsWith( GOOGLE_CHARTS_ERROR_ID_PREFIX ) ||
+		node.querySelector( `[id^="${ GOOGLE_CHARTS_ERROR_ID_PREFIX }"]` ) !== null
+	);
+}
+
+/**
+ * Normalizes the raw Google Charts error event into the GeoChart error shape.
+ *
+ * @param eventArgs - Error event payload from react-google-charts.
+ * @return Normalized GeoChart error.
+ */
+function normalizeGeoChartError( eventArgs: unknown ): GeoChartError {
+	const payload = Array.isArray( eventArgs ) ? eventArgs[ 0 ] : eventArgs;
+
+	if ( ! payload || typeof payload !== 'object' ) {
+		return {};
+	}
+
+	const { id, message, detailedMessage, options } = payload as GoogleChartErrorPayload;
+
+	return {
+		...( typeof id === 'string' && { id } ),
+		...( typeof message === 'string' && { message } ),
+		...( typeof detailedMessage === 'string' && { detailedMessage } ),
+		...( options &&
+			typeof options === 'object' &&
+			! Array.isArray( options ) && { options: options as Record< string, unknown > } ),
+	};
+}
 
 /**
  * Renders a geographical chart using Google Charts GeoChart to visualize data.
@@ -37,6 +124,7 @@ type GoogleChartOptions = Record< string, unknown >;
  * @param props.height            - Height of the chart in pixels
  * @param props.region            - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)
  * @param props.resolution        - Resolution level ('countries', 'provinces', or 'metros')
+ * @param props.onError           - Optional callback for Google Charts errors
  * @param props.className         - Additional CSS class name for the chart container
  * @param props.renderPlaceholder - Optional render function for the loading placeholder
  * @return A React component displaying an interactive map with data visualization
@@ -48,6 +136,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	height,
 	region = 'world',
 	resolution = 'countries',
+	onError,
 	renderPlaceholder,
 } ) => {
 	const {
@@ -57,6 +146,49 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			backgroundColor,
 		},
 	} = useGlobalChartsContext();
+	const containerRef = useRef< HTMLDivElement >( null );
+	const reportedErrorIdsRef = useRef< Set< string > >( new Set() );
+
+	// The ChartWrapper `error` event does not fire for every draw failure —
+	// notably not when GeoChart's asynchronous map-file load fails (e.g.
+	// `resolution: 'provinces'` for a country without a provinces map). Those
+	// errors only surface as DOM elements Google injects into the container, so
+	// watch the container and report them through the same `onError` callback.
+	useEffect( () => {
+		const container = containerRef.current;
+
+		if ( ! onError || ! container || typeof MutationObserver === 'undefined' ) {
+			return undefined;
+		}
+
+		const reportRenderedErrors = () => {
+			for ( const error of collectRenderedGeoChartErrors( container ) ) {
+				if ( reportedErrorIdsRef.current.has( error.id ) ) {
+					continue;
+				}
+
+				reportedErrorIdsRef.current.add( error.id );
+				onError( error );
+			}
+		};
+
+		// GeoChart mutates the container heavily while drawing and resizing;
+		// only rescan when an added node involves a Google error element.
+		const observer = new MutationObserver( records => {
+			const hasErrorNodes = records.some( record =>
+				Array.from( record.addedNodes ).some( involvesGeoChartErrorElement )
+			);
+
+			if ( hasErrorNodes ) {
+				reportRenderedErrors();
+			}
+		} );
+		observer.observe( container, { childList: true, subtree: true } );
+		// Report errors already rendered before the observer attached.
+		reportRenderedErrors();
+
+		return () => observer.disconnect();
+	}, [ onError ] );
 
 	// Render loading placeholder
 	const loadingPlaceholder = (
@@ -146,18 +278,36 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		]
 	);
 
+	const chartEvents = useMemo< ReactGoogleChartEvent[] | undefined >( () => {
+		if ( ! onError ) {
+			return undefined;
+		}
+
+		return [
+			{
+				eventName: 'error',
+				callback: ( { eventArgs } ) => {
+					onError( normalizeGeoChartError( eventArgs ) );
+				},
+			},
+		];
+	}, [ onError ] );
+
 	return (
 		<Center
+			ref={ containerRef }
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart"
 			style={ { width, height, backgroundColor } }
 		>
 			<Chart
 				chartType="GeoChart"
+				chartPackages={ GEO_CHART_PACKAGES }
 				width={ width }
 				height={ height }
 				data={ sanitizedData.data }
 				options={ options }
+				chartEvents={ chartEvents }
 				loader={ loadingPlaceholder }
 			/>
 		</Center>

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

@@ -1,2 +1,2 @@
 export { default as GeoChart, GeoChartUnresponsive } from './geo-chart';
-export type { GeoChartProps, GeoRegion, GeoResolution } from './types';
+export type { GeoChartProps, GeoRegion, GeoResolution, GeoChartError } from './types';

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

@@ -1,12 +1,17 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Chart } from 'react-google-charts';
 import { GlobalChartsProvider } from '../../../providers';
 import GeoChart, { GeoChartUnresponsive } from '../geo-chart';
 
 // Mock react-google-charts
 jest.mock( 'react-google-charts', () => ( {
-	Chart: jest.fn( ( { data, options, width, height } ) => {
+	Chart: jest.fn( ( { chartEvents, chartPackages, data, options, width, height } ) => {
 		return (
 			<div data-testid="google-chart-mock" data-width={ width } data-height={ height }>
+				<div data-testid="chart-events">
+					{ JSON.stringify( chartEvents?.map( event => event.eventName ) ?? [] ) }
+				</div>
+				<div data-testid="chart-packages">{ JSON.stringify( chartPackages ) }</div>
 				<div data-testid="chart-data">{ JSON.stringify( data ) }</div>
 				<div data-testid="chart-options">{ JSON.stringify( options ) }</div>
 			</div>
@@ -15,6 +20,8 @@ jest.mock( 'react-google-charts', () => ( {
 } ) );
 
 describe( 'GeoChart', () => {
+	const ChartMock = Chart as jest.Mock;
+
 	const defaultProps = {
 		width: 800,
 		height: 400,
@@ -64,6 +71,15 @@ describe( 'GeoChart', () => {
 			expect( chart ).toHaveAttribute( 'data-width', '1200' );
 			expect( chart ).toHaveAttribute( 'data-height', '600' );
 		} );
+
+		test( 'loads the GeoChart package explicitly', () => {
+			renderWithTheme();
+
+			const chartPackages = screen.getByTestId( 'chart-packages' );
+			const packages = JSON.parse( chartPackages.textContent || '[]' );
+
+			expect( packages ).toEqual( [ 'corechart', 'controls', 'geochart' ] );
+		} );
 	} );
 
 	describe( 'Data Handling', () => {
@@ -248,6 +264,120 @@ describe( 'GeoChart', () => {
 		} );
 	} );
 
+	describe( 'Chart Events', () => {
+		test( 'does not pass chart events when onError is omitted', () => {
+			renderWithTheme();
+
+			const chartEvents = screen.getByTestId( 'chart-events' );
+			const events = JSON.parse( chartEvents.textContent || '[]' );
+
+			expect( events ).toEqual( [] );
+		} );
+
+		test( 'calls onError when Google Charts emits an error', () => {
+			const onError = jest.fn();
+			renderWithTheme( { onError } );
+
+			const chartProps = ChartMock.mock.calls[ ChartMock.mock.calls.length - 1 ]?.[ 0 ];
+			const errorEvent = chartProps.chartEvents.find(
+				( event: { eventName: string } ) => event.eventName === 'error'
+			);
+
+			errorEvent.callback( {
+				eventArgs: [
+					{
+						id: 'map-error',
+						message: 'Requested map does not exist.',
+						detailedMessage: 'The requested map is not available.',
+						options: { region: 'SG', resolution: 'provinces' },
+					},
+				],
+			} );
+
+			expect( onError ).toHaveBeenCalledWith( {
+				id: 'map-error',
+				message: 'Requested map does not exist.',
+				detailedMessage: 'The requested map is not available.',
+				options: { region: 'SG', resolution: 'provinces' },
+			} );
+		} );
+
+		test( 'reports error elements Google injects into the chart container', async () => {
+			const onError = jest.fn();
+			renderWithTheme( { onError } );
+
+			// Simulate Google Charts rendering a draw error into the container,
+			// as happens when an async map-file load fails without firing the
+			// ChartWrapper error event.
+			const container = screen.getByTestId( 'geo-chart' );
+			const errorWrapper = document.createElement( 'div' );
+			errorWrapper.id = 'google-visualization-errors-all-1';
+			const errorSpan = document.createElement( 'span' );
+			errorSpan.id = 'google-visualization-errors-1';
+			errorSpan.textContent = 'Requested map does not exist.';
+			errorWrapper.appendChild( errorSpan );
+			container.appendChild( errorWrapper );
+
+			await waitFor( () =>
+				expect( onError ).toHaveBeenCalledWith( {
+					id: 'google-visualization-errors-1',
+					message: 'Requested map does not exist.',
+				} )
+			);
+		} );
+
+		test( 'reports error elements nested inside an added plain node', async () => {
+			const onError = jest.fn();
+			renderWithTheme( { onError } );
+
+			// The observer filters mutation records by the added node; an error
+			// element arriving inside a plain wrapper must still be found.
+			const container = screen.getByTestId( 'geo-chart' );
+			const plainWrapper = document.createElement( 'div' );
+			const errorSpan = document.createElement( 'span' );
+			errorSpan.id = 'google-visualization-errors-9';
+			errorSpan.textContent = 'Requested map does not exist.';
+			plainWrapper.appendChild( errorSpan );
+			container.appendChild( plainWrapper );
+
+			await waitFor( () =>
+				expect( onError ).toHaveBeenCalledWith( {
+					id: 'google-visualization-errors-9',
+					message: 'Requested map does not exist.',
+				} )
+			);
+		} );
+
+		test( 'reports each rendered error element only once', async () => {
+			const onError = jest.fn();
+			renderWithTheme( { onError } );
+
+			const container = screen.getByTestId( 'geo-chart' );
+			const errorSpan = document.createElement( 'span' );
+			errorSpan.id = 'google-visualization-errors-2';
+			errorSpan.textContent = 'Requested map does not exist.';
+			container.appendChild( errorSpan );
+
+			await waitFor( () => expect( onError ).toHaveBeenCalledTimes( 1 ) );
+
+			// A later mutation makes the observer re-scan the container; the first
+			// error is seen again but must not be re-reported. The second error
+			// being reported proves the re-scan happened.
+			const secondErrorSpan = document.createElement( 'span' );
+			secondErrorSpan.id = 'google-visualization-errors-3';
+			secondErrorSpan.textContent = 'Requested map does not exist.';
+			container.appendChild( secondErrorSpan );
+
+			await waitFor( () =>
+				expect( onError ).toHaveBeenCalledWith( {
+					id: 'google-visualization-errors-3',
+					message: 'Requested map does not exist.',
+				} )
+			);
+			expect( onError ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+
 	describe( 'Loading State', () => {
 		test( 'provides loading placeholder to Google Charts', () => {
 			// The loading placeholder is passed to the Chart component's loader prop

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

@@ -15,6 +15,13 @@ export type GeoRegion = 'world' | ( string & {} );
  */
 export type GeoResolution = 'countries' | 'provinces' | 'metros';
 
+export interface GeoChartError {
+	id?: string;
+	message?: string;
+	detailedMessage?: string;
+	options?: Record< string, unknown >;
+}
+
 export interface GeoChartProps
 	extends Pick< BaseChartProps, 'className' | 'chartId' | 'width' | 'height' > {
 	/**
@@ -39,6 +46,10 @@ export interface GeoChartProps
 	 * @default 'countries'
 	 */
 	resolution?: GeoResolution;
+	/**
+	 * Callback fired when Google Charts emits a chart error.
+	 */
+	onError?: ( error: GeoChartError ) => void;
 	/**
 	 * Optional render function for the loading placeholder.
 	 * Called while Google Charts is loading.