@automattic/charts 1.6.0 → 1.8.0

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

@@ -54,16 +54,18 @@ const defaultDeltaFormatter = ( value: number ): string => {
 
 /**
  * Build a bar's width. A hover-inset CSS variable (0 by default) is subtracted
- * so interactive rows can pull the bar's right edge back by a fixed pixel amount
- * on hover — instead of a percentage scale — keeping the bar↔value gap constant.
+ * on hover, scaled by the bar's share so the pull-back is proportional to its
+ * length: the full-length (100%) bar — the one that reaches the value — pulls
+ * back the whole inset to keep its gap with the value, while shorter bars pull
+ * back proportionally less, down to ~0 for a very short bar.
  *
  * @param share - The bar's share of the row width, as a percentage.
  * @return A CSS width value.
  */
 const getBarWidth = ( share: number ): string =>
-	`calc(${ share }% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px))`;
+	`calc(${ share }% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${ share } / 100)`;
 
-const BarLabel = ( { label }: { label: string | JSX.Element } ) => (
+const BarLabel = ( { label }: { label: LeaderboardEntry[ 'label' ] } ) => (
 	<>{ typeof label === 'string' ? <Text className={ styles.label }>{ label }</Text> : label }</>
 );
 
@@ -376,6 +378,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 											type="button"
 											className={ styles.interactiveRow }
 											onClick={ entry.onClick }
+											aria-label={ entry.ariaLabel }
 										>
 											{ rowCells }
 											<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />

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

@@ -1,4 +1,5 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import LeaderboardChart from '../leaderboard-chart';
 import type { LeaderboardEntry } from '../../../types';
 
@@ -375,20 +376,66 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByRole( 'button' ).tagName ).toBe( 'BUTTON' );
 		} );
 
-		it( 'calls onClick when the row is clicked', () => {
+		it( 'calls onClick when the row is clicked', async () => {
+			const user = userEvent.setup();
 			const onClick = jest.fn();
 			render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick } ] } /> );
-			// eslint-disable-next-line testing-library/prefer-user-event
-			fireEvent.click( screen.getByRole( 'button' ) );
+			await user.click( screen.getByRole( 'button' ) );
 			expect( onClick ).toHaveBeenCalledTimes( 1 );
 		} );
 
+		it( 'activates onClick via the keyboard (Enter and Space)', async () => {
+			const user = userEvent.setup();
+			const onClick = jest.fn();
+			render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick } ] } /> );
+
+			await user.tab();
+			expect( screen.getByRole( 'button' ) ).toHaveFocus();
+
+			await user.keyboard( '[Enter]' );
+			await user.keyboard( '[Space]' );
+			expect( onClick ).toHaveBeenCalledTimes( 2 );
+		} );
+
 		it( 'gives the interactive row an accessible name from the label and value', () => {
 			render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick: jest.fn() } ] } /> );
 			// mockData[0] label is 'Direct', currentValue 12500 → '12.5K'
 			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName( /Direct.*12\.5K/ );
 		} );
 
+		it( 'derives the accessible name from an image label via its alt text', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							...mockData[ 0 ],
+							label: <img src="https://example.com/flag.svg" alt="United States" />,
+							onClick: jest.fn(),
+						},
+					] }
+				/>
+			);
+			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName( /United States.*12\.5K/ );
+		} );
+
+		it( 'uses ariaLabel as the accessible name when provided', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							...mockData[ 0 ],
+							label: <img src="https://example.com/flag.svg" alt="" />,
+							ariaLabel: 'United States: 12.5K visitors',
+							onClick: jest.fn(),
+						},
+					] }
+				/>
+			);
+			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName(
+				'United States: 12.5K visitors'
+			);
+		} );
+
 		it( 'does not render a button for entries without onClick', () => {
 			render( <LeaderboardChart data={ [ mockData[ 0 ] ] } /> );
 			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();

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

@@ -42,10 +42,10 @@ import styles from './line-chart.module.scss';
 import { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';
 import type { RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';
 import type { DataPoint, DataPointDate, SeriesData, Optional } from '../../types';
+import type { RenderTooltipParams } from '../../visx/types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { TickFormatter } from '@visx/axis';
 import type { GlyphProps } from '@visx/xychart';
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { FC, Ref } from 'react';
 
 const defaultRenderGlyph = < Datum extends object >( props: RenderLineGlyphProps< Datum > ) => {

package/src/charts/line-chart/private/line-chart-annotation-label-popover.tsx

@@ -1,5 +1,4 @@
 import { __ } from '@wordpress/i18n';
-import { Icon, close } from '@wordpress/icons';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useEffect, useId, useRef, useState } from 'react';
@@ -10,6 +9,23 @@ import type { FC } from 'react';
 
 export const POPOVER_BUTTON_SIZE = 44;
 
+const CloseIcon = () => (
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<path d="M6 6l12 12M18 6L6 18" />
+	</svg>
+);
+
 interface LineChartAnnotationLabelWithPopoverProps {
 	title: string;
 	subtitle?: string;
@@ -101,7 +117,7 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 						className={ styles[ 'line-chart__annotation-label-popover-close-button' ] }
 						aria-label={ __( 'Close', 'jetpack-charts' ) }
 					>
-						<Icon icon={ close } size={ 16 } />
+						<CloseIcon />
 					</button>
 				</Stack>
 			</div>

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

@@ -15,7 +15,7 @@ import LineChartAnnotationLabelWithPopover, {
 	POPOVER_BUTTON_SIZE,
 } from './line-chart-annotation-label-popover';
 import type { LineChartAnnotationProps } from '../types';
-import type { LabelProps } from '@visx/annotation/lib/components/Label';
+import type { LabelProps } from '@visx/annotation';
 import type { TextProps } from '@visx/text';
 import type { FC } from 'react';
 

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

@@ -5,8 +5,8 @@ import type {
 	AnnotationStyles,
 	DataPoint,
 } from '../../types';
+import type { RenderTooltipParams } from '../../visx/types';
 import type { GlyphProps } from '@visx/xychart';
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { ReactNode, SVGProps, FC } from 'react';
 
 export type LineChartAnnotationProps = {

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

@@ -7,8 +7,4 @@
 		width: 100%;
 	}
 
-	&__centering {
-		width: 100%;
-		height: 100%;
-	}
 }

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

@@ -2,7 +2,6 @@ import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { __ } from '@wordpress/i18n';
-import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
@@ -22,6 +21,7 @@ import {
 } from '../../providers';
 import { attachSubComponents, resolveFontSize } from '../../utils';
 import { getStringWidth } from '../../visx/text';
+import { Center } from '../private/center';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation/';
@@ -358,12 +358,7 @@ const PieChartInternal = ( {
 						: 0;
 
 					return (
-						<Stack
-							ref={ containerRef }
-							align="center"
-							justify="center"
-							className={ styles[ 'pie-chart__centering' ] }
-						>
+						<Center ref={ containerRef }>
 							<svg
 								viewBox={ `0 0 ${ width } ${ height }` }
 								preserveAspectRatio="xMidYMid meet"
@@ -493,7 +488,7 @@ const PieChartInternal = ( {
 									{ ! allSegmentsHidden && svgChildren }
 								</Group>
 							</svg>
-						</Stack>
+						</Center>
 					);
 				} }
 			</ChartLayout>

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -5,11 +5,6 @@
 		width: 100%;
 	}
 
-	&__centering {
-		width: 100%;
-		height: 100%;
-	}
-
 	.label {
 		font-weight: var(--wpds-typography-font-weight-medium, 499);
 		font-size: var(--wpds-typography-font-size-lg, 16px);

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -3,7 +3,6 @@ import { Pie } from '@visx/shape';
 import { Text } from '@visx/text';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { __ } from '@wordpress/i18n';
-import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
@@ -21,6 +20,7 @@ import {
 	GlobalChartsContext,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
+import { Center } from '../private/center';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation';
@@ -37,7 +37,7 @@ import type {
 } from '../../types';
 import type { ChartComponentWithComposition } from '../private/chart-composition';
 import type { ResponsiveConfig } from '../private/with-responsive';
-import type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
+import type { PieProvidedProps } from '@visx/shape';
 import type { FC, MouseEvent, ReactNode } from 'react';
 
 /**
@@ -135,7 +135,7 @@ type PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<
 	PieSemiCircleChartBaseProps & ResponsiveConfig
 >;
 
-export type ArcData = PieArcDatum< DataPointPercentageCalculated >;
+export type ArcData = PieProvidedProps< DataPointPercentageCalculated >[ 'arcs' ][ number ];
 
 /**
  * Validates the semi-circle pie chart data
@@ -397,12 +397,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					const innerRadius = radius * ( 1 - thickness );
 
 					return (
-						<Stack
-							ref={ containerRef }
-							align="center"
-							justify="center"
-							className={ styles[ 'pie-semi-circle-chart__centering' ] }
-						>
+						<Center ref={ containerRef }>
 							<svg
 								width={ width }
 								height={ height }
@@ -491,7 +486,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 									) }
 								</Group>
 							</svg>
-						</Stack>
+						</Center>
 					);
 				} }
 			</ChartLayout>

package/src/charts/private/center/center.module.scss

@@ -0,0 +1,4 @@
+.center {
+	width: 100%;
+	height: 100%;
+}

package/src/charts/private/center/center.tsx

@@ -0,0 +1,33 @@
+import { Stack } from '@wordpress/ui';
+import clsx from 'clsx';
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import styles from './center.module.scss';
+
+export type CenterProps = ComponentPropsWithoutRef< typeof Stack >;
+
+/**
+ * Centers its children on both axes and fills its parent.
+ *
+ * A thin wrapper around `Stack` with `align="center"` and `justify="center"`
+ * defaults (both overridable) plus `width: 100%; height: 100%`. Reads more
+ * honestly than a `Stack` with both axes centered, and lets call sites drop
+ * ad-hoc `*__centering` classes. Forwards its ref and spreads remaining props
+ * onto the underlying `Stack`.
+ *
+ * @param props - Stack props; `align`/`justify` default to `"center"`.
+ * @param ref   - Forwarded to the underlying element.
+ * @return The centered layout element.
+ */
+export const Center = forwardRef< HTMLDivElement, CenterProps >(
+	( { align = 'center', justify = 'center', className, ...props }, ref ) => (
+		<Stack
+			ref={ ref }
+			align={ align }
+			justify={ justify }
+			className={ clsx( styles.center, className ) }
+			{ ...props }
+		/>
+	)
+);
+
+Center.displayName = 'Center';

package/src/charts/private/center/index.ts

@@ -0,0 +1,2 @@
+export { Center } from './center';
+export type { CenterProps } from './center';

package/src/charts/private/center/test/center.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Center } from '../index';
+
+describe( 'Center', () => {
+	test( 'renders its children', () => {
+		render(
+			<Center data-testid="center">
+				<span>Centered content</span>
+			</Center>
+		);
+		expect( screen.getByTestId( 'center' ) ).toHaveTextContent( 'Centered content' );
+	} );
+
+	test( 'merges a custom className with the center class', () => {
+		render(
+			<Center data-testid="center" className="custom-class">
+				child
+			</Center>
+		);
+		const el = screen.getByTestId( 'center' );
+		expect( el ).toHaveClass( 'center' );
+		expect( el ).toHaveClass( 'custom-class' );
+	} );
+
+	test( 'forwards its ref to the underlying element', () => {
+		const ref = createRef< HTMLDivElement >();
+		render( <Center ref={ ref }>child</Center> );
+		expect( ref.current ).toBeInstanceOf( HTMLElement );
+	} );
+
+	test( 'spreads arbitrary props through to the element', () => {
+		render(
+			<Center data-testid="center" style={ { width: 120 } }>
+				child
+			</Center>
+		);
+		expect( screen.getByTestId( 'center' ) ).toHaveStyle( { width: '120px' } );
+	} );
+
+	test( 'centers on both axes by default', () => {
+		render( <Center data-testid="center">child</Center> );
+		expect( screen.getByTestId( 'center' ) ).toHaveStyle( {
+			alignItems: 'center',
+			justifyContent: 'center',
+		} );
+	} );
+
+	test( 'allows overriding the align and justify defaults', () => {
+		render(
+			<Center data-testid="center" align="flex-start" justify="flex-end">
+				child
+			</Center>
+		);
+		expect( screen.getByTestId( 'center' ) ).toHaveStyle( {
+			alignItems: 'flex-start',
+			justifyContent: 'flex-end',
+		} );
+	} );
+} );

package/src/charts/private/chart-layout/chart-layout.tsx

@@ -3,9 +3,8 @@ import { useEffect } from 'react';
 import { useElementSize } from '../../../hooks';
 import { renderLegendSlot } from '../chart-composition';
 import styles from './chart-layout.module.scss';
-import type { LegendPosition } from '../../../types';
+import type { GapSize, LegendPosition } from '../../../types';
 import type { LegendChild } from '../chart-composition/use-chart-children';
-import type { GapSize } from '@wordpress/theme';
 import type { CSSProperties, ReactNode } from 'react';
 
 /**

package/src/charts/private/svg-empty-state/svg-empty-state.module.scss

@@ -1,7 +1,5 @@
 .svg-empty-state {
 	text-align: center;
-	width: 100%;
-	height: 100%;
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
 }

package/src/charts/private/svg-empty-state/svg-empty-state.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@wordpress/ui';
+import { Center } from '../center';
 import styles from './svg-empty-state.module.scss';
 import type { FC, ReactNode } from 'react';
 
@@ -32,9 +32,7 @@ interface SvgEmptyStateProps {
 export const SvgEmptyState: FC< SvgEmptyStateProps > = ( { x, y, width, height, children } ) => {
 	return (
 		<foreignObject x={ x - width / 2 } y={ y - height / 2 } width={ width } height={ height }>
-			<Stack align="center" justify="center" className={ styles[ 'svg-empty-state' ] }>
-				{ children }
-			</Stack>
+			<Center className={ styles[ 'svg-empty-state' ] }>{ children }</Center>
 		</foreignObject>
 	);
 };

package/src/charts/private/x-zoom.tsx

@@ -5,7 +5,7 @@ import styles from './x-zoom.module.scss';
 import type { SingleChartRef } from './single-chart-context';
 import type { AxisScale } from '@visx/axis';
 import type { EventHandlerParams } from '@visx/xychart';
-import type { MutableRefObject, ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 
 const MIN_DRAG_PIXELS = 6;
 
@@ -37,7 +37,7 @@ export function useXZoom< T extends Date | number = Date >( {
 	userHandlers,
 }: {
 	enabled: boolean;
-	chartRef: MutableRefObject< SingleChartRef | null >;
+	chartRef: RefObject< SingleChartRef | null >;
 	userHandlers?: {
 		onPointerDown?: PointerHandler;
 		onPointerMove?: PointerHandler;

package/src/components/legend/hooks/use-chart-legend-items.ts

@@ -6,9 +6,13 @@ import {
 	type ElementStyles,
 } from '../../../providers';
 import { formatPercentage } from '../../../utils';
-import type { SeriesData, DataPointDate, DataPointPercentageCalculated } from '../../../types';
+import type {
+	SeriesData,
+	DataPointDate,
+	DataPointPercentageCalculated,
+	LegendShape,
+} from '../../../types';
 import type { BaseLegendItem } from '../types';
-import type { LegendShape } from '@visx/legend/lib/types';
 import type { GlyphProps } from '@visx/xychart';
 import type { ReactNode } from 'react';
 

package/src/components/legend/legend.tsx

@@ -3,8 +3,7 @@ import { SingleChartContext } from '../../charts/private/single-chart-context';
 import { GlobalChartsContext } from '../../providers';
 import { BaseLegend } from './private';
 import type { LegendProps } from './types';
-import type { ChartType } from '../../types';
-import type { LegendShape } from '@visx/legend/lib/types';
+import type { ChartType, LegendShape } from '../../types';
 
 const defaultShapeByChartType: Partial<
 	Record< ChartType, Extract< LegendShape< unknown, unknown >, string > >

package/src/components/legend/utils/label-transform-factory.ts

@@ -1,4 +1,4 @@
-import type { ItemTransformer, LabelFormatter } from '@visx/legend/lib/types';
+import type { ItemTransformer, LabelFormatter } from '@visx/legend';
 import type { AnyD3Scale, ScaleInput } from '@visx/scale';
 
 /**

package/src/components/tooltip/accessible-tooltip.tsx

@@ -1,10 +1,7 @@
 import { Tooltip, TooltipContext } from '@visx/xychart';
 import { useContext, useEffect, useCallback, useMemo } from 'react';
 import type { SeriesData, DataPointDate } from '../../types';
-import type {
-	TooltipProps as BaseTooltipProps,
-	RenderTooltipParams,
-} from '@visx/xychart/lib/components/Tooltip';
+import type { RenderTooltipParams, XyChartTooltipProps } from '../../visx/types';
 import type { ReactNode } from 'react';
 
 // Type for flattened tooltip data used in individual mode
@@ -17,7 +14,7 @@ export type FlattenedTooltipData = {
 
 // Enhanced tooltip with keyboard navigation and accessibility
 interface AccessibleTooltipProps
-	extends Omit< BaseTooltipProps< DataPointDate >, 'renderTooltip' > {
+	extends Omit< XyChartTooltipProps< DataPointDate >, 'renderTooltip' > {
 	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
 	selectedIndex?: number | undefined;
 	tooltipRef?: ( element: HTMLDivElement | null ) => void;
@@ -242,4 +239,3 @@ export const useKeyboardNavigation = ( {
 
 // Re-export the base Tooltip for backwards compatibility
 export { Tooltip };
-export type { BaseTooltipProps };

package/src/index.ts

@@ -54,6 +54,12 @@ export type {
 	ChartLegendConfig,
 	BaseChartProps,
 	GridProps,
+	GoogleDataTableColumn,
+	GoogleDataTableColumnRoleType,
+	GoogleDataTableRow,
+	LegendShape,
+	LegendShapeLabel,
+	LegendShapeRenderProps,
 } from './types';
 export type * from './visx/types';
 export type { PieChartProps, PieChartRenderTooltipParams } from './charts/pie-chart';
@@ -65,11 +71,6 @@ export type { GeoChartProps, GeoRegion, GeoResolution } from './charts/geo-chart
 export type { LegendValueDisplay, BaseLegendItem } from './components/legend';
 export type { TrendIndicatorProps, TrendDirection } from './components/trend-indicator';
 export type { LineStyles, GridStyles, EventHandlerParams } from '@visx/xychart';
-export type {
-	GoogleDataTableColumn,
-	GoogleDataTableRow,
-	GoogleDataTableColumnRoleType,
-} from 'react-google-charts';
 
 // Re-exports from removed individual entry points
 export { useLeaderboardLegendItems } from './charts/leaderboard-chart/hooks';

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

@@ -10,6 +10,7 @@ import {
 } from 'react';
 import {
 	getItemShapeStyles,
+	getSeriesBarStyles,
 	getSeriesLineStyles,
 	mergeThemes,
 	resolveCssVariable,
@@ -206,6 +207,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( { childre
 						( isPointPercentageData && data?.color ),
 				} ),
 				lineStyles: isSeriesData ? getSeriesLineStyles( data, index, providerTheme ) : {},
+				barStyles: isSeriesData ? getSeriesBarStyles( data, index, providerTheme ) : {},
 				glyph: providerTheme.glyphs?.[ index ],
 				shapeStyles: isSeriesData
 					? getItemShapeStyles( data, index, providerTheme, legendShape )

package/src/providers/chart-context/test/chart-context.test.tsx

@@ -4,6 +4,7 @@ import { GlobalChartsProvider } from '../global-charts-provider';
 import { useChartId } from '../hooks/use-chart-id';
 import { useChartRegistration } from '../hooks/use-chart-registration';
 import { useGlobalChartsContext } from '../hooks/use-global-charts-context';
+import { defaultTheme } from '../themes';
 import type { BaseLegendItem } from '../../../components/legend';
 import type { ChartTheme, SeriesData } from '../../../types';
 import type { GlobalChartsContextValue } from '../types';
@@ -1165,10 +1166,12 @@ describe( 'ChartContext', () => {
 				legendShape: 'rect',
 			} );
 
-			// Should get theme legend shape styles, not line styles
+			// Should get theme legend shape styles (not line styles), with the comparison bar
+			// opacity layered on so the swatch matches the translucent comparison bar.
 			expect( styles.shapeStyles ).toEqual( {
 				fill: '#LEGEND1',
 				stroke: '#BORDER1',
+				opacity: 0.5,
 			} );
 		} );
 	} );
@@ -2534,4 +2537,13 @@ describe( 'ChartContext', () => {
 			} );
 		} );
 	} );
+
+	describe( 'defaultTheme', () => {
+		it( 'exposes default barChart comparison styles', () => {
+			expect( defaultTheme.barChart.barStyles.comparison ).toEqual( {
+				widthFactor: 1.5,
+				opacity: 0.5,
+			} );
+		} );
+	} );
 } );

package/src/providers/chart-context/themes.ts

@@ -53,7 +53,7 @@ const defaultTheme: CompleteChartTheme = {
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
-		labelSpacing: 1.5,
+		labelSpacing: 'xs',
 		deltaColors: [ '#FF8C8F', '#757575', '#1F9828' ], // [negative, neutral, positive]
 	},
 	conversionFunnelChart: {
@@ -69,6 +69,14 @@ const defaultTheme: CompleteChartTheme = {
 			},
 		},
 	},
+	barChart: {
+		barStyles: {
+			comparison: {
+				widthFactor: 1.5,
+				opacity: 0.5,
+			},
+		},
+	},
 	sparkline: {
 		margin: { top: 2, right: 2, bottom: 2, left: 2 },
 		strokeWidth: 1.5,

package/src/providers/chart-context/types.ts

@@ -1,7 +1,13 @@
 import { CSSProperties, ReactNode } from 'react';
 import type { BaseLegendItem } from '../../components/legend';
-import type { ChartType, CompleteChartTheme, DataPointPercentage, SeriesData } from '../../types';
-import type { LegendShape } from '@visx/legend/lib/types';
+import type {
+	BarStyles,
+	ChartType,
+	CompleteChartTheme,
+	DataPointPercentage,
+	LegendShape,
+	SeriesData,
+} from '../../types';
 import type { GlyphProps, LineStyles } from '@visx/xychart';
 
 export interface ChartRegistration {
@@ -20,6 +26,7 @@ export type GetElementStylesParams = {
 export type ElementStyles = {
 	color: string;
 	lineStyles: LineStyles;
+	barStyles: BarStyles;
 	glyph: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;
 	shapeStyles: CSSProperties & LineStyles;
 };