@automattic/charts 0.56.4 → 0.56.6

package/dist/index.js

@@ -1,50 +1,50 @@
 import {
   LeaderboardChart,
   LeaderboardChartResponsive
-} from "./chunk-PGJAZN2H.js";
+} from "./chunk-XD2HV7M5.js";
 import {
   PieChart,
   PieChartResponsive
-} from "./chunk-KKPZ4MVF.js";
+} from "./chunk-7FDQGBY7.js";
 import "./chunk-NFRB2POF.js";
 import {
   PieSemiCircleChart,
   PieSemiCircleChartResponsive
-} from "./chunk-CMHPXSCI.js";
+} from "./chunk-VPAEBI2F.js";
 import "./chunk-KXRWNFQJ.js";
 import "./chunk-6CCZL2JJ.js";
 import {
   Sparkline,
   SparklineUnresponsive
-} from "./chunk-WMWAUOQ4.js";
+} from "./chunk-E62LCBGD.js";
 import {
   LineChart,
   LineChartResponsive
-} from "./chunk-R23BFDIW.js";
+} from "./chunk-OMS5QIJN.js";
 import {
   TrendIndicator
 } from "./chunk-XWYZIFZW.js";
 import {
   BarListChart,
   BarListChartResponsive
-} from "./chunk-M7PRGJFE.js";
+} from "./chunk-MDRCAGKZ.js";
 import {
   BarChart,
   BarChartResponsive
-} from "./chunk-FZYJM5PN.js";
+} from "./chunk-SSFFCBCF.js";
 import {
   BaseTooltip
 } from "./chunk-BPYKWMI7.js";
 import {
   ConversionFunnelChartWithProvider
-} from "./chunk-EBDUXL5K.js";
-import "./chunk-MEIVKY4K.js";
-import "./chunk-SEKPIG5K.js";
+} from "./chunk-KHQPN77E.js";
+import "./chunk-IS5YYLTV.js";
+import "./chunk-KNIMXN6Z.js";
 import {
   GeoChartResponsive,
   GeoChartWithProvider
-} from "./chunk-ZY4FXLMM.js";
-import "./chunk-TYIH5LMV.js";
+} from "./chunk-GWBS65VC.js";
+import "./chunk-OP6PHB2U.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
@@ -53,7 +53,7 @@ import {
   useChartLegendItems,
   useGlobalChartsContext,
   useGlobalChartsTheme
-} from "./chunk-AWNCAKZY.js";
+} from "./chunk-RFSHE3HL.js";
 import "./chunk-TE63Y5PX.js";
 import "./chunk-G3PMV62Z.js";
 export {

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

@@ -3,7 +3,7 @@ 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-BCFQlzTM.js';
+import { B as BaseChartProps, L as LeaderboardEntry } from './types-CzdN7rUe.js';
 
 interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legendOrientation' | 'legendPosition' | 'legendAlignment' | 'legendShape' | 'chartId' | 'width' | 'height' | 'size' | 'legendInteractive' | 'animation'> {
     /**

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

@@ -3,7 +3,7 @@ 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-BCFQlzTM.cjs';
+import { B as BaseChartProps, L as LeaderboardEntry } from './types-CzdN7rUe.cjs';
 
 interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legendOrientation' | 'legendPosition' | 'legendAlignment' | 'legendShape' | 'chartId' | 'width' | 'height' | 'size' | 'legendInteractive' | 'animation'> {
     /**

package/dist/providers/index.cjs

@@ -6,7 +6,7 @@
 
 
 
-var _chunkLSV7F26Bcjs = require('../chunk-LSV7F26B.cjs');
+var _chunkYDVHT7GScjs = require('../chunk-YDVHT7GS.cjs');
 require('../chunk-ZVGEDXDP.cjs');
 require('../chunk-EMMSS5I5.cjs');
 
@@ -17,5 +17,5 @@ require('../chunk-EMMSS5I5.cjs');
 
 
 
-exports.GlobalChartsContext = _chunkLSV7F26Bcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkLSV7F26Bcjs.GlobalChartsProvider; exports.defaultTheme = _chunkLSV7F26Bcjs.defaultTheme; exports.useChartId = _chunkLSV7F26Bcjs.useChartId; exports.useChartRegistration = _chunkLSV7F26Bcjs.useChartRegistration; exports.useGlobalChartsContext = _chunkLSV7F26Bcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkLSV7F26Bcjs.useGlobalChartsTheme;
+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;
 //# sourceMappingURL=index.cjs.map

package/dist/providers/index.css

@@ -1,10 +1,7 @@
 /* esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss */
 .a8ccharts-jCw5dQ {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
+  inset: 0;
   overflow: visible;
   z-index: 1;
   pointer-events: none;

package/dist/providers/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss","esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss"],"sourcesContent":[".a8ccharts-jCw5dQ {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1;\n  pointer-events: none;\n}",".a8ccharts-AELBvX {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n.a8ccharts-fX8uQe {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.a8ccharts-fX8uQe.a8ccharts-DEe0wg {\n  align-items: flex-start;\n}\n.a8ccharts-fX8uQe.a8ccharts-WBKF9I {\n  align-items: center;\n}\n.a8ccharts-fX8uQe.a8ccharts-JfwMng {\n  align-items: flex-end;\n}\n.a8ccharts-8Y73Kh {\n  position: relative;\n}\n.a8ccharts-8Y73Kh.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-8Y73Kh.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-8Y73Kh.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n.a8ccharts-TVM-IY {\n  position: relative;\n}\n.a8ccharts-TVM-IY.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-TVM-IY.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-TVM-IY.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n\n.a8ccharts-Vflwq8 {\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n}\n.a8ccharts-qGsavM {\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 0.2s ease;\n}\n.a8ccharts-qGsavM:hover {\n  opacity: 0.8;\n}\n.a8ccharts-qGsavM:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.a8ccharts-qGsavM:focus:not(:focus-visible) {\n  outline: none;\n}\n.a8ccharts-ZtDY-Q {\n  opacity: 0.4;\n}\n.a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {\n  text-decoration: line-through;\n}\n\n.a8ccharts-2H65Kr {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  /* Text wrapping is handled at the text level, not the label container */\n}\n\n.a8ccharts-faSDBI {\n  overflow-wrap: break-word;\n  white-space: normal;\n  hyphens: auto;\n}\n.a8ccharts-FISUIO {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.a8ccharts-DTZlT- {\n  font-weight: 500;\n  flex-shrink: 0;\n}"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,OAAK;AACL,QAAM;AACN,SAAO;AACP,UAAQ;AACR,YAAU;AACV,WAAS;AACT,kBAAgB;AAClB;;;ACTA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,aAAW;AACX,OAAK;AACP;AACA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AACA,CALC,gBAKgB,CAAC;AAChB,eAAa;AACf;AACA,CARC,gBAQgB,CAAC;AAChB,eAAa;AACf;AACA,CAXC,gBAWgB,CAAC;AAChB,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAxBC;AAyBhB,mBAAiB;AACnB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,aAAW;AACb;AACA,CAAC;AACC,UAAQ;AACR,eAAa;AACb,cAAY,QAAQ,KAAK;AAC3B;AACA,CALC,gBAKgB;AACf,WAAS;AACX;AACA,CARC,gBAQgB;AACf,WAAS,IAAI,MAAM;AACnB,kBAAgB;AAChB,iBAAe;AACjB;AACA,CAbC,gBAagB,MAAM,KAAK;AAC1B,WAAS;AACX;AACA,CAAC;AACC,WAAS;AACX;AACA,CAHC,iBAGiB,CAAC;AACjB,mBAAiB;AACnB;AAEA,CAJmB;AAKjB,WAAS;AACT,eAAa;AACb,OAAK;AAEP;AAEA,CAAC;AACC,iBAAe;AACf,eAAa;AACb,WAAS;AACX;AACA,CAAC;AACC,eAAa;AACb,YAAU;AACV,iBAAe;AACf,eAAa;AACb,aAAW;AACb;AAEA,CAAC;AACC,eAAa;AACb,eAAa;AACf;","names":[]}
+{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss","esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss"],"sourcesContent":[".a8ccharts-jCw5dQ {\n  position: fixed;\n  inset: 0;\n  overflow: visible;\n  z-index: 1;\n  pointer-events: none;\n}",".a8ccharts-AELBvX {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n.a8ccharts-fX8uQe {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.a8ccharts-fX8uQe.a8ccharts-DEe0wg {\n  align-items: flex-start;\n}\n.a8ccharts-fX8uQe.a8ccharts-WBKF9I {\n  align-items: center;\n}\n.a8ccharts-fX8uQe.a8ccharts-JfwMng {\n  align-items: flex-end;\n}\n.a8ccharts-8Y73Kh {\n  position: relative;\n}\n.a8ccharts-8Y73Kh.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-8Y73Kh.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-8Y73Kh.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n.a8ccharts-TVM-IY {\n  position: relative;\n}\n.a8ccharts-TVM-IY.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-TVM-IY.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-TVM-IY.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n\n.a8ccharts-Vflwq8 {\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n}\n.a8ccharts-qGsavM {\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 0.2s ease;\n}\n.a8ccharts-qGsavM:hover {\n  opacity: 0.8;\n}\n.a8ccharts-qGsavM:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.a8ccharts-qGsavM:focus:not(:focus-visible) {\n  outline: none;\n}\n.a8ccharts-ZtDY-Q {\n  opacity: 0.4;\n}\n.a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {\n  text-decoration: line-through;\n}\n\n.a8ccharts-2H65Kr {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  /* Text wrapping is handled at the text level, not the label container */\n}\n\n.a8ccharts-faSDBI {\n  overflow-wrap: break-word;\n  white-space: normal;\n  hyphens: auto;\n}\n.a8ccharts-FISUIO {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.a8ccharts-DTZlT- {\n  font-weight: 500;\n  flex-shrink: 0;\n}"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,SAAO;AACP,YAAU;AACV,WAAS;AACT,kBAAgB;AAClB;;;ACNA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,aAAW;AACX,OAAK;AACP;AACA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AACA,CALC,gBAKgB,CAAC;AAChB,eAAa;AACf;AACA,CARC,gBAQgB,CAAC;AAChB,eAAa;AACf;AACA,CAXC,gBAWgB,CAAC;AAChB,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAxBC;AAyBhB,mBAAiB;AACnB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,aAAW;AACb;AACA,CAAC;AACC,UAAQ;AACR,eAAa;AACb,cAAY,QAAQ,KAAK;AAC3B;AACA,CALC,gBAKgB;AACf,WAAS;AACX;AACA,CARC,gBAQgB;AACf,WAAS,IAAI,MAAM;AACnB,kBAAgB;AAChB,iBAAe;AACjB;AACA,CAbC,gBAagB,MAAM,KAAK;AAC1B,WAAS;AACX;AACA,CAAC;AACC,WAAS;AACX;AACA,CAHC,iBAGiB,CAAC;AACjB,mBAAiB;AACnB;AAEA,CAJmB;AAKjB,WAAS;AACT,eAAa;AACb,OAAK;AAEP;AAEA,CAAC;AACC,iBAAe;AACf,eAAa;AACb,WAAS;AACX;AACA,CAAC;AACC,eAAa;AACb,YAAU;AACV,iBAAe;AACf,eAAa;AACb,aAAW;AACb;AAEA,CAAC;AACC,eAAa;AACb,eAAa;AACf;","names":[]}

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-BDVaIfBz.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-CVR5rmIs.cjs';
 import { B as BaseLegendItem } from '../types-C05PdDJa.cjs';
 import 'react';
-import '../types-BCFQlzTM.cjs';
+import '../types-CzdN7rUe.cjs';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';
@@ -11,6 +11,7 @@ import '@visx/legend/lib/types';
 import '@visx/scale';
 import '@visx/text/lib/Text';
 import '@visx/xychart';
+import '@wordpress/theme';
 import 'react-google-charts';
 import '@visx/legend';
 

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-mcS8QNkQ.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-DQzmaSze.js';
 import { B as BaseLegendItem } from '../types-C05PdDJa.js';
 import 'react';
-import '../types-BCFQlzTM.js';
+import '../types-CzdN7rUe.js';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';
@@ -11,6 +11,7 @@ import '@visx/legend/lib/types';
 import '@visx/scale';
 import '@visx/text/lib/Text';
 import '@visx/xychart';
+import '@wordpress/theme';
 import 'react-google-charts';
 import '@visx/legend';
 

package/dist/providers/index.js

@@ -6,7 +6,7 @@ import {
   useChartRegistration,
   useGlobalChartsContext,
   useGlobalChartsTheme
-} from "../chunk-AWNCAKZY.js";
+} from "../chunk-RFSHE3HL.js";
 import "../chunk-TE63Y5PX.js";
 import "../chunk-G3PMV62Z.js";
 export {

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

@@ -1,6 +1,6 @@
 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-BCFQlzTM.cjs';
+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 { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles, GlyphProps } from '@visx/xychart';

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

@@ -1,6 +1,6 @@
 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-BCFQlzTM.js';
+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 { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles, GlyphProps } from '@visx/xychart';

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

@@ -7,6 +7,7 @@ import { LegendShape } from '@visx/legend/lib/types';
 import { ScaleType, ScaleInput } from '@visx/scale';
 import { TextProps } from '@visx/text/lib/Text';
 import { EventHandlerParams, LineStyles, GridStyles, GlyphProps } from '@visx/xychart';
+import { GapSize } from '@wordpress/theme';
 import { PointerEvent, ReactNode, CSSProperties } from 'react';
 import { GoogleDataTableColumn, GoogleDataTableRow } from 'react-google-charts';
 
@@ -334,15 +335,17 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
      */
     className?: string;
     /**
-     * Width of the chart in pixels
+     * Width of the chart container in pixels. When omitted, the chart fills its parent's width.
      */
     width?: number;
     /**
-     * Height of the chart in pixels
+     * Height of the chart container in pixels. When omitted, the chart fills its parent's height.
      */
     height?: number;
     /**
-     * Size of the chart in pixels for pie and donut charts
+     * Maximum diameter of the pie in pixels (pie and donut charts only).
+     * The pie will shrink if the container is smaller than this value.
+     * When omitted, the pie fills the available space.
      */
     size?: number;
     /**
@@ -426,6 +429,12 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
      * Whether to show chart animation on initial render or not
      */
     animation?: boolean;
+    /**
+     * Gap between chart elements (SVG, legend, children).
+     * Uses WordPress design system tokens.
+     * @default 'md'
+     */
+    gap?: GapSize;
     /**
      * More options for the chart.
      */

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

@@ -7,6 +7,7 @@ import { LegendShape } from '@visx/legend/lib/types';
 import { ScaleType, ScaleInput } from '@visx/scale';
 import { TextProps } from '@visx/text/lib/Text';
 import { EventHandlerParams, LineStyles, GridStyles, GlyphProps } from '@visx/xychart';
+import { GapSize } from '@wordpress/theme';
 import { PointerEvent, ReactNode, CSSProperties } from 'react';
 import { GoogleDataTableColumn, GoogleDataTableRow } from 'react-google-charts';
 
@@ -334,15 +335,17 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
      */
     className?: string;
     /**
-     * Width of the chart in pixels
+     * Width of the chart container in pixels. When omitted, the chart fills its parent's width.
      */
     width?: number;
     /**
-     * Height of the chart in pixels
+     * Height of the chart container in pixels. When omitted, the chart fills its parent's height.
      */
     height?: number;
     /**
-     * Size of the chart in pixels for pie and donut charts
+     * Maximum diameter of the pie in pixels (pie and donut charts only).
+     * The pie will shrink if the container is smaller than this value.
+     * When omitted, the pie fills the available space.
      */
     size?: number;
     /**
@@ -426,6 +429,12 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
      * Whether to show chart animation on initial render or not
      */
     animation?: boolean;
+    /**
+     * Gap between chart elements (SVG, legend, children).
+     * Uses WordPress design system tokens.
+     * @default 'md'
+     */
+    gap?: GapSize;
     /**
      * More options for the chart.
      */

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-BCFQlzTM.cjs';
+import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-CzdN7rUe.cjs';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles } from '@visx/xychart';
 import '@visx/annotation/lib/components/CircleSubject';
@@ -9,6 +9,7 @@ import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';
 import '@visx/annotation/lib/components/LineSubject';
 import '@visx/text/lib/Text';
+import '@wordpress/theme';
 import 'react';
 import 'react-google-charts';
 

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-BCFQlzTM.js';
+import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-CzdN7rUe.js';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles } from '@visx/xychart';
 import '@visx/annotation/lib/components/CircleSubject';
@@ -9,6 +9,7 @@ import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';
 import '@visx/annotation/lib/components/LineSubject';
 import '@visx/text/lib/Text';
+import '@wordpress/theme';
 import 'react';
 import 'react-google-charts';
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.56.4",
+	"version": "0.56.6",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -180,7 +180,7 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.0.18",
+		"@automattic/number-formatters": "^1.1.0",
 		"@babel/runtime": "7.28.6",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -200,8 +200,8 @@
 		"@visx/vendor": "^3.12.0",
 		"@visx/xychart": "^3.12.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/theme": "0.6.0",
-		"@wordpress/ui": "0.6.0",
+		"@wordpress/theme": "0.7.0",
+		"@wordpress/ui": "0.7.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -215,18 +215,18 @@
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@babel/preset-typescript": "7.28.5",
-		"@storybook/addon-docs": "10.2.3",
-		"@storybook/react": "10.2.3",
+		"@storybook/addon-docs": "10.2.11",
+		"@storybook/react": "10.2.11",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/jest": "^30.0.0",
-		"@types/react": "18.3.26",
+		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
 		"@visx/glyph": "3.12.0",
-		"@wordpress/components": "32.1.0",
-		"@wordpress/element": "6.39.0",
+		"@wordpress/components": "32.2.0",
+		"@wordpress/element": "6.40.0",
 		"babel-jest": "30.2.0",
 		"babel-plugin-react-remove-properties": "^0.3.1",
 		"esbuild": "0.25.9",
@@ -239,7 +239,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.2",
-		"storybook": "10.2.3",
+		"storybook": "10.2.11",
 		"tsup": "8.5.1",
 		"typescript": "5.9.3"
 	},

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

@@ -12,7 +12,7 @@ import {
 	useChartDataTransform,
 	useZeroValueDisplay,
 	useChartMargin,
-	useElementHeight,
+	useElementSize,
 	useHasLegendChild,
 	usePrefersReducedMotion,
 } from '../../hooks';
@@ -32,7 +32,6 @@ import { useBarChartOptions } from './private';
 import type { BaseChartProps, DataPointDate, SeriesData, Optional } from '../../types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
-import type { GapSize } from '@wordpress/theme';
 import type { FC, ReactNode, ComponentType } from 'react';
 
 export interface BarChartProps extends BaseChartProps< SeriesData[] > {
@@ -42,12 +41,6 @@ export interface BarChartProps extends BaseChartProps< SeriesData[] > {
 	showZeroValues?: boolean;
 	legendInteractive?: boolean;
 	children?: ReactNode;
-	/**
-	 * Gap between chart elements (SVG, legend, children).
-	 * Uses WordPress design system tokens.
-	 * @default 'md'
-	 */
-	gap?: GapSize;
 }
 
 // Base props type with optional responsive properties
@@ -125,7 +118,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const legendItems = useChartLegendItems( dataSorted );
 	const chartOptions = useBarChartOptions( dataWithVisibleZeros, horizontal, options );
 	const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );
-	const [ svgWrapperRef, svgWrapperHeight ] = useElementHeight< HTMLDivElement >();
+	const [ svgWrapperRef, , svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 	const chartRef = useRef< HTMLDivElement >( null );
 
 	// Check if children contain a Legend component (composition pattern)

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

@@ -3,10 +3,10 @@ import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import BarChart from '../bar-chart';
 
-// Mock useElementHeight to return a non-zero height in jsdom so charts render
+// Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
-jest.mock( '../../../hooks/use-element-height', () => ( {
-	useElementHeight: () => [ mockRefCallback, 300 ], // Return test height to allow chart rendering
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
 } ) );
 
 describe( 'BarChart', () => {

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

@@ -14,7 +14,7 @@ import {
 	useXYChartTheme,
 	useChartDataTransform,
 	useChartMargin,
-	useElementHeight,
+	useElementSize,
 	useHasLegendChild,
 	usePrefersReducedMotion,
 } from '../../hooks';
@@ -288,7 +288,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		const providerTheme = useGlobalChartsTheme();
 		const theme = useXYChartTheme( data );
 		const chartId = useChartId( providedChartId );
-		const [ svgWrapperRef, svgWrapperHeight ] = useElementHeight< HTMLDivElement >();
+		const [ svgWrapperRef, , svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 		const chartRef = useRef< HTMLDivElement >( null );
 		const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
 		const [ isNavigating, setIsNavigating ] = useState( false );

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

@@ -8,10 +8,10 @@ import { GlobalChartsProvider, defaultTheme } from '../../../providers';
 import LineChart, { LineChartUnresponsive } from '../line-chart';
 import type { SingleChartRef } from '../../private/single-chart-context';
 
-// Mock useElementHeight to return a non-zero height in jsdom so charts render
+// Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
-jest.mock( '../../../hooks/use-element-height', () => ( {
-	useElementHeight: () => [ mockRefCallback, 300 ], // Return test height to allow chart rendering
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
 } ) );
 
 const customTheme = {

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

@@ -7,7 +7,6 @@ import type {
 } from '../../types';
 import type { GlyphProps } from '@visx/xychart';
 import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
-import type { GapSize } from '@wordpress/theme';
 import type { ReactNode, SVGProps, FC } from 'react';
 
 export type LineChartAnnotationProps = {
@@ -44,12 +43,6 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] > {
 	};
 	legendInteractive?: boolean;
 	children?: ReactNode;
-	/**
-	 * Gap between chart elements (SVG, legend, children).
-	 * Uses WordPress design system tokens.
-	 * @default 'md'
-	 */
-	gap?: GapSize;
 }
 
 export type TooltipDatum = {

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

@@ -3,9 +3,20 @@
 	flex-direction: column;
 	overflow: hidden;
 	align-items: center;
-	gap: 20px;
 
-	&--legend-top {
-		flex-direction: column-reverse;
+	// Fill parent when no explicit width/height provided
+	&--responsive {
+		height: 100%;
+		width: 100%;
+	}
+
+	&__svg-wrapper {
+		flex: 1;
+		min-height: 0; // Required for flex shrinking
+		min-width: 0; // Required for flex shrinking
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 }