@automattic/charts 0.56.7 → 0.57.0

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 export { BarChart, BarChartUnresponsive } from './charts/bar-chart/index.js';
 export { BarListChart, BarListChartUnresponsive } from './charts/bar-list-chart/index.js';
 export { ConversionFunnelChart } from './charts/conversion-funnel-chart/index.js';
-export { A as AnnotationStyles, B as BaseChartProps, a as ButtonWithPopover, C as ChartTheme, b as CompleteChartTheme, D as DataPoint, c as DataPointDate, d as DataPointPercentage, G as GeoData, e as GradientStop, f as GridProps, L as LeaderboardEntry, M as MultipleDataPointsDate, O as Optional, g as OrientationType, P as PopoverButtonAttributes, h as PopoverElement, i as PopoverElementAttributes, S as ScaleOptions, j as SeriesData, k as SeriesDataOptions, T as ToggleEvent } from './types-CzdN7rUe.js';
+export { A as AnnotationStyles, B as BaseChartProps, a as ButtonWithPopover, C as ChartTheme, b as CompleteChartTheme, D as DataPoint, c as DataPointDate, d as DataPointPercentage, G as GeoData, e as GradientStop, f as GridProps, L as LeaderboardEntry, M as MultipleDataPointsDate, O as Optional, g as OrientationType, P as PopoverButtonAttributes, h as PopoverElement, i as PopoverElementAttributes, S as ScaleOptions, j as SeriesData, k as SeriesDataOptions, T as ToggleEvent } from './types-DZordNiO.js';
 export { GeoChart, GeoChartProps, GeoChartUnresponsive, GeoRegion, GeoResolution } from './charts/geo-chart/index.js';
-export { L as LeaderboardChart, a as LeaderboardChartUnresponsive } from './leaderboard-chart-BSgEw_Um.js';
-export { EventHandlerParams, GridStyles, LineStyles } from '@visx/xychart';
-export { L as Legend } from './legend-jjMmhSg3.js';
+export { L as LeaderboardChart, a as LeaderboardChartUnresponsive } from './leaderboard-chart-BKYYXcg2.js';
+export { L as Legend } from './legend-Cj0xM5dU.js';
 export { LegendValueDisplay, useChartLegendItems } from './components/legend/index.js';
-export { B as BaseLegendItem } from './types-C05PdDJa.js';
+export { B as BaseLegendItem, L as LegendItemStyles, a as LegendLabelStyles, b as LegendShapeStyles } from './types-I67mddpr.js';
+export { EventHandlerParams, GridStyles, LineStyles } from '@visx/xychart';
 export { LineChart, LineChartUnresponsive } from './charts/line-chart/index.js';
 export { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 export { PieChart, PieChartProps, PieChartRenderTooltipParams, PieChartUnresponsive } from './charts/pie-chart/index.js';
@@ -15,7 +15,7 @@ export { PieSemiCircleChart, PieSemiCircleChartProps, PieSemiCircleChartRenderTo
 export { Sparkline, SparklineUnresponsive } from './charts/sparkline/index.js';
 export { B as BaseTooltip } from './base-tooltip-DOq93wjU.js';
 export { TrendDirection, TrendIndicator, TrendIndicatorProps } from './components/trend-indicator/index.js';
-export { G as GlobalChartsContext, a as GlobalChartsProvider, a as ThemeProvider, d as defaultTheme, u as useGlobalChartsContext, b as useGlobalChartsTheme } from './themes-DQzmaSze.js';
+export { G as GlobalChartsContext, a as GlobalChartsProvider, a as ThemeProvider, d as defaultTheme, u as useGlobalChartsContext, b as useGlobalChartsTheme } from './themes-BmVGrYnF.js';
 export { GoogleDataTableColumn, GoogleDataTableColumnRoleType, GoogleDataTableRow } from 'react-google-charts';
 import 'react';
 import './with-responsive-CNfhzAUu.js';
@@ -31,5 +31,5 @@ import '@visx/scale';
 import '@visx/text/lib/Text';
 import '@wordpress/theme';
 import '@visx/legend';
-import './types-DQNnq5Fr.js';
+import './types-CuUEszrM.js';
 import '@visx/shape/lib/shapes/Pie';

package/dist/index.js

@@ -1,49 +1,48 @@
 import {
   LeaderboardChart,
   LeaderboardChartResponsive
-} from "./chunk-XD2HV7M5.js";
+} from "./chunk-2NCY7R4G.js";
 import {
   PieChart,
   PieChartResponsive
-} from "./chunk-7FDQGBY7.js";
+} from "./chunk-BCX5THDQ.js";
 import "./chunk-NFRB2POF.js";
 import {
   PieSemiCircleChart,
   PieSemiCircleChartResponsive
-} from "./chunk-VPAEBI2F.js";
+} from "./chunk-V36ERY7Y.js";
 import "./chunk-KXRWNFQJ.js";
 import "./chunk-6CCZL2JJ.js";
 import {
   Sparkline,
   SparklineUnresponsive
-} from "./chunk-E62LCBGD.js";
+} from "./chunk-PXLEMUGJ.js";
 import {
   LineChart,
   LineChartResponsive
-} from "./chunk-OMS5QIJN.js";
+} from "./chunk-WLODYNLB.js";
 import {
   TrendIndicator
 } from "./chunk-XWYZIFZW.js";
 import {
   BarListChart,
   BarListChartResponsive
-} from "./chunk-MDRCAGKZ.js";
+} from "./chunk-H2V4JMSA.js";
 import {
   BarChart,
   BarChartResponsive
-} from "./chunk-SSFFCBCF.js";
+} from "./chunk-4OPFE4RM.js";
 import {
   BaseTooltip
 } from "./chunk-BPYKWMI7.js";
 import {
   ConversionFunnelChartWithProvider
-} from "./chunk-KHQPN77E.js";
-import "./chunk-IS5YYLTV.js";
-import "./chunk-KNIMXN6Z.js";
+} from "./chunk-CZGYJKG6.js";
+import "./chunk-Z26M4V2M.js";
 import {
   GeoChartResponsive,
   GeoChartWithProvider
-} from "./chunk-GWBS65VC.js";
+} from "./chunk-IU4DYUAV.js";
 import "./chunk-OP6PHB2U.js";
 import {
   GlobalChartsContext,
@@ -53,8 +52,8 @@ import {
   useChartLegendItems,
   useGlobalChartsContext,
   useGlobalChartsTheme
-} from "./chunk-RFSHE3HL.js";
-import "./chunk-TE63Y5PX.js";
+} from "./chunk-32DH6JDF.js";
+import "./chunk-DAU3HNEG.js";
 import "./chunk-G3PMV62Z.js";
 export {
   BarChartResponsive as BarChart,

package/dist/{leaderboard-chart-BSgEw_Um.d.ts → leaderboard-chart-BKYYXcg2.d.ts}

@@ -2,10 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { R as ResponsiveConfig } from './with-responsive-CNfhzAUu.js';
 import * as react from 'react';
 import { ReactNode, FC } from 'react';
-import { a as BaseLegendProps, B as BaseLegendItem } from './types-C05PdDJa.js';
-import { B as BaseChartProps, L as LeaderboardEntry } from './types-CzdN7rUe.js';
+import { b as LegendShapeStyles, c as BaseLegendProps, B as BaseLegendItem } from './types-I67mddpr.js';
+import { B as BaseChartProps, L as LeaderboardEntry } from './types-DZordNiO.js';
 
-interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legendOrientation' | 'legendPosition' | 'legendAlignment' | 'legendShape' | 'chartId' | 'width' | 'height' | 'size' | 'legendInteractive' | 'animation'> {
+interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legendOrientation' | 'legendPosition' | 'legendAlignment' | 'legendShape' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'legendInteractive' | 'animation'> {
     /**
      * Whether to show comparison data
      */
@@ -41,13 +41,9 @@ interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, '
         '--a8c--charts--leaderboard--bar--border-radius'?: string;
     };
     /**
-     * Width of legend shapes in pixels
+     * Styles for legend shapes (width, height, margin).
      */
-    legendShapeWidth?: number;
-    /**
-     * Height of legend shapes in pixels
-     */
-    legendShapeHeight?: number;
+    legendShapeStyles?: LegendShapeStyles;
     /**
      * Custom labels for legend items
      */

package/dist/{leaderboard-chart-COtgamhe.d.cts → leaderboard-chart-DR7CGb0L.d.cts}

@@ -2,10 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { R as ResponsiveConfig } from './with-responsive-CNfhzAUu.cjs';
 import * as react from 'react';
 import { ReactNode, FC } from 'react';
-import { a as BaseLegendProps, B as BaseLegendItem } from './types-C05PdDJa.cjs';
-import { B as BaseChartProps, L as LeaderboardEntry } from './types-CzdN7rUe.cjs';
+import { b as LegendShapeStyles, c as BaseLegendProps, B as BaseLegendItem } from './types-I67mddpr.cjs';
+import { B as BaseChartProps, L as LeaderboardEntry } from './types-DZordNiO.cjs';
 
-interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legendOrientation' | 'legendPosition' | 'legendAlignment' | 'legendShape' | 'chartId' | 'width' | 'height' | 'size' | 'legendInteractive' | 'animation'> {
+interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legendOrientation' | 'legendPosition' | 'legendAlignment' | 'legendShape' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'legendInteractive' | 'animation'> {
     /**
      * Whether to show comparison data
      */
@@ -41,13 +41,9 @@ interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, '
         '--a8c--charts--leaderboard--bar--border-radius'?: string;
     };
     /**
-     * Width of legend shapes in pixels
+     * Styles for legend shapes (width, height, margin).
      */
-    legendShapeWidth?: number;
-    /**
-     * Height of legend shapes in pixels
-     */
-    legendShapeHeight?: number;
+    legendShapeStyles?: LegendShapeStyles;
     /**
      * Custom labels for legend items
      */

package/dist/{legend-C9ahiwOt.d.cts → legend-C2grwnWk.d.cts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { a as BaseLegendProps, B as BaseLegendItem } from './types-C05PdDJa.cjs';
+import { c as BaseLegendProps, B as BaseLegendItem } from './types-I67mddpr.cjs';
 
 declare const Legend: react.ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
     items?: BaseLegendItem[];

package/dist/{legend-jjMmhSg3.d.ts → legend-Cj0xM5dU.d.ts}

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { a as BaseLegendProps, B as BaseLegendItem } from './types-C05PdDJa.js';
+import { c as BaseLegendProps, B as BaseLegendItem } from './types-I67mddpr.js';
 
 declare const Legend: react.ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
     items?: BaseLegendItem[];

package/dist/providers/index.cjs

@@ -6,8 +6,8 @@
 
 
 
-var _chunkYDVHT7GScjs = require('../chunk-YDVHT7GS.cjs');
-require('../chunk-ZVGEDXDP.cjs');
+var _chunkRHHVEJHJcjs = require('../chunk-RHHVEJHJ.cjs');
+require('../chunk-VTS3PNMS.cjs');
 require('../chunk-EMMSS5I5.cjs');
 
 
@@ -17,5 +17,5 @@ require('../chunk-EMMSS5I5.cjs');
 
 
 
-exports.GlobalChartsContext = _chunkYDVHT7GScjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkYDVHT7GScjs.GlobalChartsProvider; exports.defaultTheme = _chunkYDVHT7GScjs.defaultTheme; exports.useChartId = _chunkYDVHT7GScjs.useChartId; exports.useChartRegistration = _chunkYDVHT7GScjs.useChartRegistration; exports.useGlobalChartsContext = _chunkYDVHT7GScjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkYDVHT7GScjs.useGlobalChartsTheme;
+exports.GlobalChartsContext = _chunkRHHVEJHJcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkRHHVEJHJcjs.GlobalChartsProvider; exports.defaultTheme = _chunkRHHVEJHJcjs.defaultTheme; exports.useChartId = _chunkRHHVEJHJcjs.useChartId; exports.useChartRegistration = _chunkRHHVEJHJcjs.useChartRegistration; exports.useGlobalChartsContext = _chunkRHHVEJHJcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkRHHVEJHJcjs.useGlobalChartsTheme;
 //# sourceMappingURL=index.cjs.map

package/dist/providers/index.d.cts

@@ -1,7 +1,7 @@
-export { C as ChartRegistration, E as ElementStyles, c as GetElementStylesParams, G as GlobalChartsContext, e as GlobalChartsContextValue, a as GlobalChartsProvider, d as defaultTheme, u as useGlobalChartsContext, b as useGlobalChartsTheme } from '../themes-CVR5rmIs.cjs';
-import { B as BaseLegendItem } from '../types-C05PdDJa.cjs';
+export { C as ChartRegistration, E as ElementStyles, c as GetElementStylesParams, G as GlobalChartsContext, e as GlobalChartsContextValue, a as GlobalChartsProvider, d as defaultTheme, u as useGlobalChartsContext, b as useGlobalChartsTheme } from '../themes-CyjKm-P_.cjs';
+import { B as BaseLegendItem } from '../types-I67mddpr.cjs';
 import 'react';
-import '../types-CzdN7rUe.cjs';
+import '../types-DZordNiO.cjs';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';

package/dist/providers/index.d.ts

@@ -1,7 +1,7 @@
-export { C as ChartRegistration, E as ElementStyles, c as GetElementStylesParams, G as GlobalChartsContext, e as GlobalChartsContextValue, a as GlobalChartsProvider, d as defaultTheme, u as useGlobalChartsContext, b as useGlobalChartsTheme } from '../themes-DQzmaSze.js';
-import { B as BaseLegendItem } from '../types-C05PdDJa.js';
+export { C as ChartRegistration, E as ElementStyles, c as GetElementStylesParams, G as GlobalChartsContext, e as GlobalChartsContextValue, a as GlobalChartsProvider, d as defaultTheme, u as useGlobalChartsContext, b as useGlobalChartsTheme } from '../themes-BmVGrYnF.js';
+import { B as BaseLegendItem } from '../types-I67mddpr.js';
 import 'react';
-import '../types-CzdN7rUe.js';
+import '../types-DZordNiO.js';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';

package/dist/providers/index.js

@@ -6,8 +6,8 @@ import {
   useChartRegistration,
   useGlobalChartsContext,
   useGlobalChartsTheme
-} from "../chunk-RFSHE3HL.js";
-import "../chunk-TE63Y5PX.js";
+} from "../chunk-32DH6JDF.js";
+import "../chunk-DAU3HNEG.js";
 import "../chunk-G3PMV62Z.js";
 export {
   GlobalChartsContext,

package/dist/{themes-DQzmaSze.d.ts → themes-BmVGrYnF.d.ts}

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, FC } from 'react';
-import { b as CompleteChartTheme, j as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-CzdN7rUe.js';
-import { B as BaseLegendItem } from './types-C05PdDJa.js';
+import { b as CompleteChartTheme, j as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-DZordNiO.js';
+import { B as BaseLegendItem } from './types-I67mddpr.js';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles, GlyphProps } from '@visx/xychart';
 

package/dist/{themes-CVR5rmIs.d.cts → themes-CyjKm-P_.d.cts}

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, FC } from 'react';
-import { b as CompleteChartTheme, j as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-CzdN7rUe.cjs';
-import { B as BaseLegendItem } from './types-C05PdDJa.cjs';
+import { b as CompleteChartTheme, j as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-DZordNiO.cjs';
+import { B as BaseLegendItem } from './types-I67mddpr.cjs';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles, GlyphProps } from '@visx/xychart';
 

package/dist/{types-DQNnq5Fr.d.ts → types-CuUEszrM.d.ts}

@@ -1,4 +1,4 @@
-import { L as Legend } from './legend-jjMmhSg3.js';
+import { L as Legend } from './legend-Cj0xM5dU.js';
 import { ComponentType, FC, PropsWithChildren } from 'react';
 
 /**

package/dist/{types-CzdN7rUe.d.cts → types-DZordNiO.d.cts}

@@ -192,14 +192,17 @@ type ChartTheme = {
     xAxisLineStyles?: LineStyles;
     /** Styles for series lines */
     seriesLineStyles?: LineStyles[];
-    /** Styles for legend shapes */
-    legendShapeStyles?: Record<string, unknown>[];
     /** Array of render functions for glyphs */
     glyphs?: Array<(<Datum extends object>(props: GlyphProps<Datum>) => ReactNode)>;
-    /** Styles for legend labels */
-    legendLabelStyles?: CSSProperties;
-    /** Styles for legend container */
-    legendContainerStyles?: CSSProperties;
+    /** Legend specific settings */
+    legend?: {
+        /** Styles for legend shapes */
+        shapeStyles?: Record<string, unknown>[];
+        /** Styles for legend labels */
+        labelStyles?: CSSProperties;
+        /** Styles for legend container */
+        containerStyles?: CSSProperties;
+    };
     /** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
     svgLabelSmall?: TextProps;
     annotationStyles?: AnnotationStyles;
@@ -260,6 +263,7 @@ type CompleteChartTheme = Required<ChartTheme> & {
     lineChart: {
         lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles>;
     };
+    legend: Required<NonNullable<ChartTheme['legend']>>;
     sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
         margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
     };
@@ -416,7 +420,7 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
     legendItemClassName?: string;
     /**
      * Enable interactive legend items that can toggle series visibility.
-     * Supported for LineChart, PieChart, and PieSemiCircleChart.
+     * Supported for all chart types that render series.
      * Requires chartId and GlobalChartsProvider.
      * For pie charts, percentages are recalculated so visible segments total 100%.
      */

package/dist/{types-CzdN7rUe.d.ts → types-DZordNiO.d.ts}

@@ -192,14 +192,17 @@ type ChartTheme = {
     xAxisLineStyles?: LineStyles;
     /** Styles for series lines */
     seriesLineStyles?: LineStyles[];
-    /** Styles for legend shapes */
-    legendShapeStyles?: Record<string, unknown>[];
     /** Array of render functions for glyphs */
     glyphs?: Array<(<Datum extends object>(props: GlyphProps<Datum>) => ReactNode)>;
-    /** Styles for legend labels */
-    legendLabelStyles?: CSSProperties;
-    /** Styles for legend container */
-    legendContainerStyles?: CSSProperties;
+    /** Legend specific settings */
+    legend?: {
+        /** Styles for legend shapes */
+        shapeStyles?: Record<string, unknown>[];
+        /** Styles for legend labels */
+        labelStyles?: CSSProperties;
+        /** Styles for legend container */
+        containerStyles?: CSSProperties;
+    };
     /** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
     svgLabelSmall?: TextProps;
     annotationStyles?: AnnotationStyles;
@@ -260,6 +263,7 @@ type CompleteChartTheme = Required<ChartTheme> & {
     lineChart: {
         lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles>;
     };
+    legend: Required<NonNullable<ChartTheme['legend']>>;
     sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
         margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
     };
@@ -416,7 +420,7 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
     legendItemClassName?: string;
     /**
      * Enable interactive legend items that can toggle series visibility.
-     * Supported for LineChart, PieChart, and PieSemiCircleChart.
+     * Supported for all chart types that render series.
      * Requires chartId and GlobalChartsProvider.
      * For pie charts, percentages are recalculated so visible segments total 100%.
      */

package/dist/types-I67mddpr.d.cts

@@ -0,0 +1,78 @@
+import { LegendOrdinal } from '@visx/legend';
+import { GlyphProps, LineStyles } from '@visx/xychart';
+import { ComponentProps, ReactNode, CSSProperties } from 'react';
+
+type VisxLegendProps = Pick<ComponentProps<typeof LegendOrdinal>, 'className' | 'shape' | 'fill' | 'size' | 'labelFormat' | 'labelTransform'>;
+type LegendItemStyles = {
+    /** Margin around each legend item. */
+    margin?: CSSProperties['margin'];
+    /** Flex direction for items within each legend entry. */
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+};
+type LegendLabelStyles = Pick<CSSProperties, 'justifyContent' | 'flex' | 'margin'> & {
+    /**
+     * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
+     * When set, text overflow behavior is controlled by textOverflow.
+     */
+    maxWidth?: string;
+    /**
+     * Controls how text behaves when it exceeds maxWidth.
+     * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
+     * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
+     */
+    textOverflow?: 'ellipsis' | 'wrap';
+};
+type LegendShapeStyles = {
+    /** Width of the legend shape in pixels. */
+    width?: number;
+    /** Height of the legend shape in pixels. */
+    height?: number;
+    /** Margin around the legend shape. */
+    margin?: CSSProperties['margin'];
+};
+type BaseLegendProps = VisxLegendProps & {
+    items: BaseLegendItem[];
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * TODO: Add 'left' | 'right' positioning support in future implementation
+     */
+    position?: 'top' | 'bottom';
+    alignment?: 'start' | 'center' | 'end';
+    /** Additional CSS class name for legend items. */
+    itemClassName?: string;
+    /** CSS styles for each legend item (margin, flexDirection). */
+    itemStyles?: LegendItemStyles;
+    /** Additional CSS class name for legend labels. */
+    labelClassName?: string;
+    /** CSS styles for legend labels (justifyContent, flex, margin). */
+    labelStyles?: LegendLabelStyles;
+    /** Styles for legend shapes (width, height, margin). */
+    shapeStyles?: LegendShapeStyles;
+    /**
+     * Function for rendering a custom legend layout.
+     */
+    render?: (items: BaseLegendItem[]) => ReactNode;
+    /**
+     * Enable interactive legend items that can toggle series visibility.
+     * Requires GlobalChartsProvider and chartId to be set.
+     */
+    interactive?: boolean;
+    /**
+     * Chart ID for series visibility tracking when interactive mode is enabled.
+     */
+    chartId?: string;
+};
+type LegendProps = Omit<BaseLegendProps, 'items'> & {
+    items?: BaseLegendItem[];
+    chartId?: string;
+};
+type BaseLegendItem = {
+    label: string;
+    value?: number | string;
+    color: string;
+    glyphSize?: number;
+    renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
+    shapeStyle?: CSSProperties & LineStyles;
+};
+
+export type { BaseLegendItem as B, LegendItemStyles as L, LegendLabelStyles as a, LegendShapeStyles as b, BaseLegendProps as c, LegendProps as d };

package/dist/types-I67mddpr.d.ts

@@ -0,0 +1,78 @@
+import { LegendOrdinal } from '@visx/legend';
+import { GlyphProps, LineStyles } from '@visx/xychart';
+import { ComponentProps, ReactNode, CSSProperties } from 'react';
+
+type VisxLegendProps = Pick<ComponentProps<typeof LegendOrdinal>, 'className' | 'shape' | 'fill' | 'size' | 'labelFormat' | 'labelTransform'>;
+type LegendItemStyles = {
+    /** Margin around each legend item. */
+    margin?: CSSProperties['margin'];
+    /** Flex direction for items within each legend entry. */
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+};
+type LegendLabelStyles = Pick<CSSProperties, 'justifyContent' | 'flex' | 'margin'> & {
+    /**
+     * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
+     * When set, text overflow behavior is controlled by textOverflow.
+     */
+    maxWidth?: string;
+    /**
+     * Controls how text behaves when it exceeds maxWidth.
+     * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
+     * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
+     */
+    textOverflow?: 'ellipsis' | 'wrap';
+};
+type LegendShapeStyles = {
+    /** Width of the legend shape in pixels. */
+    width?: number;
+    /** Height of the legend shape in pixels. */
+    height?: number;
+    /** Margin around the legend shape. */
+    margin?: CSSProperties['margin'];
+};
+type BaseLegendProps = VisxLegendProps & {
+    items: BaseLegendItem[];
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * TODO: Add 'left' | 'right' positioning support in future implementation
+     */
+    position?: 'top' | 'bottom';
+    alignment?: 'start' | 'center' | 'end';
+    /** Additional CSS class name for legend items. */
+    itemClassName?: string;
+    /** CSS styles for each legend item (margin, flexDirection). */
+    itemStyles?: LegendItemStyles;
+    /** Additional CSS class name for legend labels. */
+    labelClassName?: string;
+    /** CSS styles for legend labels (justifyContent, flex, margin). */
+    labelStyles?: LegendLabelStyles;
+    /** Styles for legend shapes (width, height, margin). */
+    shapeStyles?: LegendShapeStyles;
+    /**
+     * Function for rendering a custom legend layout.
+     */
+    render?: (items: BaseLegendItem[]) => ReactNode;
+    /**
+     * Enable interactive legend items that can toggle series visibility.
+     * Requires GlobalChartsProvider and chartId to be set.
+     */
+    interactive?: boolean;
+    /**
+     * Chart ID for series visibility tracking when interactive mode is enabled.
+     */
+    chartId?: string;
+};
+type LegendProps = Omit<BaseLegendProps, 'items'> & {
+    items?: BaseLegendItem[];
+    chartId?: string;
+};
+type BaseLegendItem = {
+    label: string;
+    value?: number | string;
+    color: string;
+    glyphSize?: number;
+    renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
+    shapeStyle?: CSSProperties & LineStyles;
+};
+
+export type { BaseLegendItem as B, LegendItemStyles as L, LegendLabelStyles as a, LegendShapeStyles as b, BaseLegendProps as c, LegendProps as d };

package/dist/{types-BBwg4Evw.d.cts → types-KtOPPzPX.d.cts}

@@ -1,4 +1,4 @@
-import { L as Legend } from './legend-C9ahiwOt.cjs';
+import { L as Legend } from './legend-C2grwnWk.cjs';
 import { ComponentType, FC, PropsWithChildren } from 'react';
 
 /**

package/dist/utils/index.cjs

@@ -18,7 +18,7 @@
 
 
 
-var _chunkZVGEDXDPcjs = require('../chunk-ZVGEDXDP.cjs');
+var _chunkVTS3PNMScjs = require('../chunk-VTS3PNMS.cjs');
 require('../chunk-EMMSS5I5.cjs');
 
 
@@ -40,5 +40,5 @@ require('../chunk-EMMSS5I5.cjs');
 
 
 
-exports.attachSubComponents = _chunkZVGEDXDPcjs.attachSubComponents; exports.formatMetricValue = _chunkZVGEDXDPcjs.formatMetricValue; exports.formatPercentage = _chunkZVGEDXDPcjs.formatPercentage; exports.getColorDistance = _chunkZVGEDXDPcjs.getColorDistance; exports.getItemShapeStyles = _chunkZVGEDXDPcjs.getItemShapeStyles; exports.getLongestTickWidth = _chunkZVGEDXDPcjs.getLongestTickWidth; exports.getSeriesLineStyles = _chunkZVGEDXDPcjs.getSeriesLineStyles; exports.getSeriesStroke = _chunkZVGEDXDPcjs.getSeriesStroke; exports.hexToRgba = _chunkZVGEDXDPcjs.hexToRgba; exports.isSafari = _chunkZVGEDXDPcjs.isSafari; exports.isValidHexColor = _chunkZVGEDXDPcjs.isValidHexColor; exports.lightenHexColor = _chunkZVGEDXDPcjs.lightenHexColor; exports.mergeThemes = _chunkZVGEDXDPcjs.mergeThemes; exports.normalizeColorToHex = _chunkZVGEDXDPcjs.normalizeColorToHex; exports.parseAsLocalDate = _chunkZVGEDXDPcjs.parseAsLocalDate; exports.parseHslString = _chunkZVGEDXDPcjs.parseHslString; exports.parseRgbString = _chunkZVGEDXDPcjs.parseRgbString; exports.resolveCssVariable = _chunkZVGEDXDPcjs.resolveCssVariable; exports.validateHexColor = _chunkZVGEDXDPcjs.validateHexColor;
+exports.attachSubComponents = _chunkVTS3PNMScjs.attachSubComponents; exports.formatMetricValue = _chunkVTS3PNMScjs.formatMetricValue; exports.formatPercentage = _chunkVTS3PNMScjs.formatPercentage; exports.getColorDistance = _chunkVTS3PNMScjs.getColorDistance; exports.getItemShapeStyles = _chunkVTS3PNMScjs.getItemShapeStyles; exports.getLongestTickWidth = _chunkVTS3PNMScjs.getLongestTickWidth; exports.getSeriesLineStyles = _chunkVTS3PNMScjs.getSeriesLineStyles; exports.getSeriesStroke = _chunkVTS3PNMScjs.getSeriesStroke; exports.hexToRgba = _chunkVTS3PNMScjs.hexToRgba; exports.isSafari = _chunkVTS3PNMScjs.isSafari; exports.isValidHexColor = _chunkVTS3PNMScjs.isValidHexColor; exports.lightenHexColor = _chunkVTS3PNMScjs.lightenHexColor; exports.mergeThemes = _chunkVTS3PNMScjs.mergeThemes; exports.normalizeColorToHex = _chunkVTS3PNMScjs.normalizeColorToHex; exports.parseAsLocalDate = _chunkVTS3PNMScjs.parseAsLocalDate; exports.parseHslString = _chunkVTS3PNMScjs.parseHslString; exports.parseRgbString = _chunkVTS3PNMScjs.parseRgbString; exports.resolveCssVariable = _chunkVTS3PNMScjs.resolveCssVariable; exports.validateHexColor = _chunkVTS3PNMScjs.validateHexColor;
 //# sourceMappingURL=index.cjs.map

package/dist/utils/index.d.cts

@@ -1,7 +1,7 @@
 export { M as MetricValueType, f as formatMetricValue } from '../format-metric-value-MXm5DtQ_.cjs';
 import { TickFormatter } from '@visx/axis';
 import { AnyD3Scale, ScaleInput } from '@visx/scale';
-import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-CzdN7rUe.cjs';
+import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-DZordNiO.cjs';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles } from '@visx/xychart';
 import '@visx/annotation/lib/components/CircleSubject';

package/dist/utils/index.d.ts

@@ -1,7 +1,7 @@
 export { M as MetricValueType, f as formatMetricValue } from '../format-metric-value-MXm5DtQ_.js';
 import { TickFormatter } from '@visx/axis';
 import { AnyD3Scale, ScaleInput } from '@visx/scale';
-import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-CzdN7rUe.js';
+import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-DZordNiO.js';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles } from '@visx/xychart';
 import '@visx/annotation/lib/components/CircleSubject';

package/dist/utils/index.js

@@ -18,7 +18,7 @@ import {
   parseRgbString,
   resolveCssVariable,
   validateHexColor
-} from "../chunk-TE63Y5PX.js";
+} from "../chunk-DAU3HNEG.js";
 import "../chunk-G3PMV62Z.js";
 export {
   attachSubComponents,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.56.7",
+	"version": "0.57.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -177,10 +177,10 @@
 		"storybook": "cd ../storybook && pnpm run storybook:dev",
 		"test": "TZ=UTC jest --config=tests/jest.config.cjs",
 		"test-coverage": "pnpm run test --coverage",
-		"typecheck": "tsc --noEmit"
+		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.1.0",
+		"@automattic/number-formatters": "^1.1.1",
 		"@babel/runtime": "7.28.6",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -224,6 +224,7 @@
 		"@types/jest": "^30.0.0",
 		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
+		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"@visx/glyph": "3.12.0",
 		"@wordpress/components": "32.2.0",
 		"@wordpress/element": "6.40.0",
@@ -232,13 +233,14 @@
 		"esbuild": "0.25.9",
 		"esbuild-plugin-babel": "^0.2.3",
 		"esbuild-sass-plugin": "^3.1.0",
+		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.2.0",
 		"jest-extended": "7.0.0",
 		"postcss": "8.5.6",
 		"postcss-modules": "6.0.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"sass-embedded": "1.97.2",
+		"sass-embedded": "1.97.3",
 		"storybook": "10.2.11",
 		"tsup": "8.5.1",
 		"typescript": "5.9.3"

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

@@ -110,8 +110,10 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const dataSorted = useChartDataTransform( data );
 
 	// Transform data to add a small value for zero bars to make them visible
+	// For vertical bars, height determines bar pixel height; for horizontal bars, width does
 	const dataWithVisibleZeros = useZeroValueDisplay( dataSorted, {
 		enabled: showZeroValues,
+		valueAxisLength: horizontal ? width : height,
 	} );
 
 	// Create legend items using the reusable hook
@@ -330,9 +332,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			orientation={ legendOrientation }
 			position={ legendPosition }
 			alignment={ legendAlignment }
-			maxWidth={ legendMaxWidth }
-			textOverflow={ legendTextOverflow }
-			legendItemClassName={ legendItemClassName }
+			labelStyles={ { maxWidth: legendMaxWidth, textOverflow: legendTextOverflow } }
+			itemClassName={ legendItemClassName }
 			className={ styles[ 'bar-chart__legend' ] }
 			shape={ legendShape }
 			chartId={ chartId }